1. 全栈程序员必看首页

从零到一搭建一个属于自己的博客系统(弎)「建议收藏」

全栈程序员-用户IM • • 未分类

从零到一搭建一个属于自己的博客系统(弎)「建议收藏」前言:结合上文讲到了博客发布,本篇文章进行对于个人的信息进行一系列操作:从零到一搭建一个属于自己的博客系统(弌):从零到一搭建一个属于自己的博客系统(弌)从零到一搭建一个属于自己的博客系统(弍):从零到一搭建一个属于自己的博客系统(弍)目录:一.界面元素:二.个人中心:1.页面部分以及HTML:2.CSS:3.效果图:4.js:三.Django接口:1.修改密码(update):2.忘记密码(see):3.日志查看(seemsg):4.日志写入(usermsg):四.补充:五.换肤:一.界面元素:

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

前言:结合上文讲到了博客发布,本篇文章进行对于个人的信息进行一系列操作:

从零到一搭建一个属于自己的博客系统(弌):从零到一搭建一个属于自己的博客系统(弌)

从零到一搭建一个属于自己的博客系统(弍):从零到一搭建一个属于自己的博客系统(弍)

目录:

一.界面元素:

在这里插入图片描述
本次更新以上红框框的两个模块,我们先看个人中心模块

二.个人中心:

1.页面部分以及HTML:

一般我们对于自己账号管理,有修改密码和忘记密码的操作,另外加上日志我们可以详细的了解自己账号的登录情况(我们采用elementUI进行元素界面的设计):
在这里插入图片描述
Personalcenter.vue

<template>
<div class="Personalcenter">
<div class="content">
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="修改密码" name="first">
<table border="0" width="100%" cellspacing="20px;">
<tr>
<td><i class="el-icon-s-custom"></i>用户名：</td>
<td>
<el-input v-model="username" disabled></el-input>
</td>
</tr>
<tr>
<td><i class="el-icon-lock"></i>旧密码：</td>
<td>
<el-input v-model="pwd1" placeholder="请输入旧密码"></el-input>
</td>
</tr>
<tr>
<td><i class="el-icon-lock"></i>新密码：</td>
<td>
<el-input v-model="pwd2" placeholder="请输入新密码"></el-input>
</td>
</tr>
<tr>
<td colspan="2">
<el-button type="primary" style="width:100%" @click="update">确定</el-button>
</td>
</tr>
<tr align="left">
<td colspan="2">规则：</td>
</tr>
<tr>
<td></td>
<td align="left">
1.密码长度为5-8位数字或字母
</td>
</tr>
<tr>
<td></td>
<td align="left">
2.用户名暂且不支持修改，它是唯一身份标记
</td>
</tr>
<tr>
<td></td>
<td align="left">
3.忘记密码点击上方的忘记密码进行该账号的密码查看
</td>
</tr>
</table>
</el-tab-pane>
<el-tab-pane label="忘记密码" name="second">
<table border="0" width="100%" cellspacing="20px;">
<tr>
<td><i class="el-icon-s-custom"></i>用户名：</td>
<td>
<el-input v-model="username" disabled></el-input>
</td>
</tr>
<tr>
<td><i class="el-icon-lock"></i>密码：</td>
<td>
<el-input v-model="pwd3" disabled></el-input>
</td>
</tr>
<tr align="left">
<td colspan="2">温馨提示：</td>
</tr>
<tr>
<td></td>
<td align="left">
1.请勿将您的密码泄露给其他人；
</td>
</tr>
<tr>
<td></td>
<td align="left">
2.忘记密码可以进行在这里查看；
</td>
</tr>
<tr>
<td></td>
<td align="left">
3.有问题请联系管理员--叫做长大
</td>
</tr>
</table>
</el-tab-pane>
<el-tab-pane label="登录信息" name="third">
<el-table :data='userData' style="width: 100%" align="center" header-align="center" >
<el-table-column label="序号" width="180" type="index" :index="indexMethod">
</el-table-column>
<el-table-column label="用户" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{
{scope.row[0]}}</span>
</template>
</el-table-column>
<el-table-column label="登录时间"> <template slot-scope="scope">
<span style="margin-left: 10px">{
{scope.row[1]}}</span>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>

2.CSS:

.Personalcenter { 

width: 100%;
height: 100%;
}
.content { 

width: 800px;
height: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
}

3.效果图:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.js:

界面布局完成那么就要进行我们的逻辑操作部分,数据的请求以及返回结果的处理 (接口部分移步三.Django接口):

  • data中存储我们需要的数据存储变量:
data () { 

return { 

activeName: 'first', // 默认显示第一个tab
username: '', //用户登录时的用户名
pwd1: '',  //原始密码
pwd2: '',  //要更改的密码
pwd3: '', // 用户忘记密码进行查看
userData: []// 用户的登录信息
}
},
  • 修改密码部分:
 // 修改密码
update () { 

//密码规则,正则验证
var reg = /^[a-zA-Z0-9@#]{5,8}$/
//输入内容为空
if (this.pwd1 === '' || this.pwd2 === '') { 

this.$message({ 

message: '密码不能为空',
type: 'error'
})
//两次密码相同
} else if (this.pwd1 === this.pwd2) { 

this.$message({ 

message: '两次密码不能一样，请仔细核查',
type: 'error'
})
//与规则不匹配
} else if (!reg.test(this.pwd1) || !reg.test(this.pwd1)) { 

this.$message({ 

message: '请输入5-8位密码',
type: 'error'
})
//初始密码输入错误
} else if (this.pwd1 !== this.pwd3) { 

this.$message({ 

message: '原始密码错误',
type: 'error'
})
} else { 

//进行数据的发送
var data = { 

user: sessionStorage.getItem('user'),
pwd: this.pwd2
}
this.$post('/update/', data, { 
headers: { 
'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => { 

if (res === 'ok') { 

this.$message({ 

message: '密码修改成功',
type: 'success'
})
//置空输入框
this.pwd1 = ''
this.pwd2 = ''
//调用查看密码方法
this.see()
//修改成功返回登录页
this.$router.push({ 

path: '/'
})
}
//请求异常时的操作
}).catch((e) => { 

this.$message({ 

message: '数据库或者网络异常' + e,
type: 'error'
})
})
}
},
  • 查看密码:
 // 忘记密码可以进行在这里查看
see () { 

需要发送的数据
var data = { 

user: sessionStorage.getItem('user')
}
this.$get('/see/', data, 'get').then(res => { 

for (var i = 0; i < res.length; i++) { 

this.pwd3 = res[i][1]
}
})
},
  • 日志查看:
 seemsg () { 

//发送数据
var data = { 

user: sessionStorage.getItem('user')
}
this.$get('/seemsg', data).then(res => { 

for (var i = 0; i < res.length; i++) { 

this.userData = res
}
})
},
  • 序号索引
  indexMethod (index) { 

return index + 1
}

三.Django接口:

首先进行操作时候我们应该知道我们需要什么接口,应该进行哪些相关的操作

1.修改密码(update):

在这里插入图片描述
同样我们在views中进行接口的编写,其原理很简单就是对于数据库中的信息进行操作而已:

def update(request):
data = json.loads(request.body, encoding='utf-8')
# 地址，用户名，密码，数据库名，编码格式
db = MySQLdb.connect("localhost", "用户名", "密码", "数据库名", charset='utf8')
# 使用cursor()方法获取操作游标
cursor = db.cursor()
# SQL 查询语句
sql = "UPDATE user_table SET password='%s' WHERE user='%s'"%(data['pwd'],data['user'])
try:
# 执行SQL语句
cursor.execute(sql)
# 提交到数据库执行
db.commit()
# # 获取所有记录列表
results = cursor.fetchall()
print(results)
except:
#异常时候返回的数据
result = { 

'code': 400,
'msg': '数据库错误'
}
print("Error: unable to fecth data")
return JsonResponse(result, safe=False)
# 关闭数据库连接
db.close()
return HttpResponse('ok')

2.忘记密码(see):

根据登录的用户名对于我们的数据库进行数据字段的查询最终返回对应字段下面的数据:

# 忘记密码
def see(request):
# 打开数据库连接
# 地址，用户名，密码，数据库名，编码格式
db = MySQLdb.connect("localhost", "用户名", "密码", "数据库名", charset='utf8')
# 使用cursor()方法获取操作游标
cursor = db.cursor()
data=request.GET
# SQL 查询语句
sql = "SELECT * FROM user_table WHERE user='%s'"%(data['user'])
try:
# 执行SQL语句
cursor.execute(sql)
# 获取所有记录列表
results = cursor.fetchall()
except:
result = { 

'code': 400,
'msg': '数据库错误'
}
print("Error: unable to fecth data")
return JsonResponse(result, safe=False)
# 关闭数据库连接
db.close()
return JsonResponse(results, safe=False)

3.日志查看(seemsg):

原理就是对于登录用户进行对应的用户名在数据库中进行查询,返回结果集:

# 查看用户的详细信息
def seemsg(request):
# 打开数据库连接
# 地址，用户名，密码，数据库名，编码格式
db = MySQLdb.connect("localhost", "用户名", "密码", "数据库名", charset='utf8')
# 使用cursor()方法获取操作游标
cursor = db.cursor()
data=request.GET
# SQL 查询语句
sql = "SELECT * FROM usermsg_table WHERE user='%s'"%(data['user'])
try:
# 执行SQL语句
cursor.execute(sql)
# 获取所有记录列表
results = cursor.fetchall()
except:
result = { 

'code': 400,
'msg': '数据库错误'
}
print("Error: unable to fecth data")
return JsonResponse(result, safe=False)
# 关闭数据库连接
db.close()
return JsonResponse(results, safe=False)

4.日志写入(usermsg):

在用户登录成功时候将登录信息通过此接口写入数据库中:

# 插入用户的登录时间
def usermsg(request):
# # UPDATE table_name SET field1 = new - value1,
#获取前端传来的参数
data = json.loads(request.body, encoding='utf-8')
# 地址，用户名，密码，数据库名，编码格式
db = MySQLdb.connect("localhost", "用户名", "密码", "数据库名", charset='utf8')
# 使用cursor()方法获取操作游标
cursor = db.cursor()
# SQL 查询语句
sql = "INSERT INTO usermsg_table(user,time) VALUES('%s','%s')"%(data['user'],data['time'])
try:
# 执行SQL语句
cursor.execute(sql)
# 提交到数据库执行
db.commit()
# 获取所有记录列表
results = cursor.fetchall()
print(results)
except:
result = { 

'code': 400,
'msg': '数据库错误'
}
print("Error: unable to fecth data")
return JsonResponse(result, safe=False)
# 关闭数据库连接
db.close()
return HttpResponse('ok')

四.补充:

日志查看是需要我们在登录时候将信息写入数据库中的,也就是在login页面进行数据的写入(接口欧请访问:三.Django接口):

在login界面,在用户点击登录按钮时:

   login () { 

// 密码校验
var reg = /^[a-zA-Z0-9@#]{5,8}$/
// var reg1 = /^[a-zA-Z0-9@#]{6}$/
if (this.user === '') { 

this.$message({ 

message: '用户名不能为空',
type: 'error'
})
} else if (!reg.test(this.user)) { 

this.$message({ 

message: '请输入5-8位账号',
type: 'error'
})
} else if (this.pwd === '') { 

this.$message({ 

message: '密码不能为空',
type: 'error'
})
} else if (!reg.test(this.pwd)) { 

this.$message({ 

message: '请输入5-8位密码',
type: 'error'
})
} else { 

//登录信息校验
this.$get('/login').then(res => { 

var a = ''
var b = ''
console.log(res)
for (var i = 0; i < res.length; i++) { 

if (this.user === res[i][0] && this.pwd === res[i][1]) { 

a = res[i][0]
b = res[i][1]
this.time = this.timestampToTime(Date.now() / 1000)
sessionStorage.setItem('sid', '已登录') // 设置本地存储信息
sessionStorage.setItem('user', this.user) // 设置本地存储信息
sessionStorage.setItem('time', this.time) // 设置本地存储信息
var data = { 

time: this.time,
user: sessionStorage.getItem('user')
}
//登录信息写入
this.$post('/usermsg/', data, { 
headers: { 
'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => { 

this.$message({ 

message: '恭喜你，登录成功！',
type: 'success'
})
this.$router.push({ 

name: 'homepage'
})
})
}
}
if (this.user !== a) { 

this.$message({ 

message: '用户不存在！',
type: 'error'
})
} else if (this.pwd !== b) { 

this.$message({ 

message: '密码有误，请核查！',
type: 'error'
})
}
})
}
}

五.换肤:

所谓换肤,就是给页面换一种背景色,我们可以使用elementUI中的ColorPicker 颜色选择器:

  1. 首先引用组件:
<div class="block">
<el-color-picker v-model="color"></el-color-picker>
</div>
  1. 我们在data中设置默认值:
 color: '#999'
  1. 添加点击事件:
<colorPicker v-model="color" @change="handleChangeColor"></colorPicker>
  1. 点击事件执行:
 handleChangeColor (val) { 

console.log('输出颜色值', val) // 颜色 # 6 c8198
this.color = val
//页面换色
document.body.style.backgroundColor = this.color
document.querySelector('a').style.color = this.color
},
  1. 效果图:
    在这里插入图片描述
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/183333.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

  • docker查看redis版本[通俗易懂] docker

    docker查看redis版本[通俗易懂]

    docker查看redis版本[通俗易懂]dockerexec-itredisredis-server-v

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月2日
  • 递归函数[通俗易懂]

    递归函数[通俗易懂]

    递归函数[通俗易懂]如果一个函数在内部调用自身，这个函数就叫做递归函数递归函数的简单定义如下：这只是一个简单的定义，什么也做不了。当然，你可以尝试会发生什么结果，理论上会永远运行下去，但实际操作时发现不一会儿程序就

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月1日
  • sql中使用什么语句创建索引_索引的创建方式有

    sql中使用什么语句创建索引_索引的创建方式有

    sql中使用什么语句创建索引_索引的创建方式有创建索引的sql语句是【CREATEINDEXindexNameONtable_name(column_name)】，这是最基本的索引，它没有任何限制。本文操作环境：windows10系统、mysql5.7、thinkpadt480电脑。创建索引的sql语句如下所示：下面是最基本的创建索引的语法，它没有任何限制。CREATEINDEXindexNameONtable_name(column_name)如果是CHAR，VARCHAR类型，length可以小.

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月6日
  • mysql导出数据库

    mysql导出数据库

    mysql导出数据库mysql命令行导出数据库mysqldump进行数据库导出备份命令行提示“拒绝访问”

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年7月27日
  • keras系列︱Sequential与Model模型、keras基本结构功能（一）

    keras系列︱Sequential与Model模型、keras基本结构功能（一）

    keras系列︱Sequential与Model模型、keras基本结构功能（一）不得不说，这深度学习框架更新太快了尤其到了Keras2.0版本，快到Keras中文版好多都是错的，快到官方文档也有旧的没更新，前路坑太多。到发文为止，已经有theano/tensorflow/CNTK支持keras,虽然说tensorflow造势很多，但是笔者认为接下来Keras才是正道。笔者先学的caffe，从使用来看，比caffe简单超级多，非常好用，特别是重新训练一个模型，但是

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月22日
  • 简要说明continue命令和break命令的不同_continue的用法

    简要说明continue命令和break命令的不同_continue的用法

    简要说明continue命令和break命令的不同_continue的用法break命令可以带一个参数，一个不带参数的break循环只能退出最内层的循环，而breakN可以退出N层循环。continue命令也可以带一个参数，一个不带参数的continue命令只去掉本次循环的剩余代码，而continueN将会把N层循环剩余的代码都去掉，但是循环的次数不变。#!/bin/shforiin”abcd”doech

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年9月13日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号