前言:其实在很早之前就有这种想法了,只不过一直比较忙没有进行实践,最近写出来和大家分享分享,一起来实现一个属于自己的博客系统。
开发环境:
- 前端:webpack+vue,
- 后端:Django不懂的小伙伴可以移步搭建第一个Django项目,
- 数据库:mysql
目录:
一.项目简介:
普遍的博客系统都会有登录、注册、首页、博文页、查看详情等页面，主要的就是数据的交互(本来想使用node来进行后端服务的,但是之前用过node所以想这次换一种语言。)。本次主要是个人进行整体的开发，如若哪儿有问题还希望大家多多指导，今天主要完成登录界面以及其所有的功能。
二.项目搭建:
1.前端:
我们使用vue来进行项目的搭建,使用vue init webpack my-project来进行项目的搭建,完成之后使用npm install来下载所需要的依赖包,接下来我们npm run dev来运行我们的项目(因为我已经开始写了,就不给大家看初始界面的样子了)
(1).项目的目录:
(2).组件以及axios:
- 我们使用vue,那么就要用到它的特点进行组件化开发,开发组件使用的是
element-ui中的组件
- 首先新建我们的登录login界面,接着在
index.js文件中进行引入和添加路由:
import login from '@/login/Login' //引入文件
export default new Router({
routes: [{
path: '/',
name: 'login',
component: login
}
]
})
- 运用
element-ui中的组件,首先得进行下载element-ui:
在终端输入以下命令进行下载依赖包
npm install element-ui -S接下来在
main.js中进行引入且使用,这样子element-ui是全局适配的import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ElementUI)
- 我们使用的为
axios进行发送请求,那么我们也需要对其进行安装配置:
- 在终端中运行如下命令进行依赖包的下载安装:
npm install axios -s
- 接下来在
main.js中进行引入:
import axios from 'axios'
Vue.prototype.$axios = axios //方便我们直接使用this.$axios来进行axios请求
(3).登录界面:
需要的依赖下载安装完成,接下来就是我们页面的制作了,首先先从登录界面开始:
login
html代码:
<template>
<div class="login">
<div class="content">
<span style="font-weight: 600;font-size: 30px">用户登录</span>
<div class="center">
<span style="font-weight:600">用户名：</span>
<el-input v-model="user" style="width:80%;margin-top: 50px" placeholder="请输入用户名"></el-input><br>
<span style="font-weight:600">密 码：</span>
<el-input v-model="pwd" type="password" style="width:80%;margin-top: 50px" placeholder="请输入密码"></el-input>
<el-button type="primary" style="margin-top: 30px" @click="login">确定</el-button>
</div>
</div>
</div>
</template>
当然这样的话布局不完美,我们来进行样式的设计:
css代码:
<style scoped>
.login {
width: 100%;
height: 100%;
position: relative;
}
.content {
width: 500px;
height: 300px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 80%);
}
.center {
width: 100%;
height: 85%;
border-top: 1px solid black;
}
</style>
最终项目运行效果图:
这样看起来还是很不错的呢,嘻嘻~~
划重点了：
-
既然界面已经制作完成，那我们就要开始进行数据的交互了，也就是点击确定按钮之后我们进行数据的提交，然后进行数值的比对，也就是通过axios发送请求至我们的接口，然后从数据库中进行查询结果是否匹配。
-
我们先移步至
（3.数据库）,数据库工作准备完毕那么接下来就是接口的书写,有了接口我们才能进行数据的发送并且来进行校验,移步(2.后端)
js代码:
首先我们需要对输入的用户名和密码进行规则的匹配:
<script>
export default {
name: 'login',
data () {
return {
user: '',
pwd: ''
}
},
components: {},
mounted () {},
methods: {
login () {
// 密码校验
var reg = /^[a-zA-Z0-9@#]{5,8}$/
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'
})
}
}
}
}
</script>
(具体的效果图咱就不看了,不然就太水文章了)
接下来就是很重要的一步,数据的请求以及处理:
this.$axios({
url: 'http://127.0.0.1:8000/login',
method: 'get'
}).then(res => {
var a = ''
var b = ''
for (var i = 0; i < res.data.length; i++) {
if (this.user === res.data[i][0] && this.pwd === res.data[i][1]) {
a = res.data[i][0] //存储我们的数据库中的用户名
b = res.data[i][1] //存储我们数据库中的密码
sessionStorage.setItem('sid', '已登录') // 设置本地存储信息
sessionStorage.setItem('user', this.user) // 设置本地存储信息
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'
})
}
})
看到这里当然会有小伙伴问这个:
this.$router.push({name: 'homepage'})
是什么意思呢,这个就是页面的进行跳转,咱们目前先不进行探讨今天主要完成登录功能,最终用户名和密码进行匹配成功时会弹出消息提示,如下:
2.后端:
Django是个不错的选择,使用起来也是很方便的,虽然说node也好用,但是咱们也就当提升一下自己么,我们上篇文章讲述了如何创建Django程序,我们这儿就不再多做介绍了,上篇文章移步:搭建第一个Django项目。
(1).新建views文件：
我们新建一个views文件：
(2).连接mysql:
我们直接上代码,在views.py文件中:
首先我们需要下载mysql的包:
pip install MySQL-python
然后在views.py中进行引入:
from django.http import HttpResponse,JsonResponse
import MySQLdb
def login(request):
# 打开数据库连接
# 地址，用户名，密码，数据库名，编码格式
db = MySQLdb.connect("localhost", "root", "password", "bolg", charset='utf8')
# 使用cursor()方法获取操作游标
cursor = db.cursor()
# SQL 查询语句
sql = "SELECT * FROM table_name"
try:
# 执行SQL语句
cursor.execute(sql)
# 获取所有记录列表
results = cursor.fetchall()
# for i in range(len(results)):
# print(f'第：{i}条数据，用户名：{results[i][0]},密码：{results[i][1]}')
# 打印结果
except:
print( "Error: unable to fecth data")
# 关闭数据库连接
db.close()
return JsonResponse(results,safe=False) //转化为json格式
(3).文件使用:
我们在urls.py中进行文件的引入:
from . import views //导入文件
urlpatterns = [
# 用户登录验证接口
path('login/',views.login),
]
(4).服务开启:
运行我们的manage.py文件,会得到如下结果:
图中红框的就是我们服务运行的地址,我们在浏览器中输入:http://127.0.0.1:8000/login就会得到我们数据库中的东西,如下:
当然使用axios进行访问时肯定会出现跨域问题,那么我们来进行跨域问题的配置:
(5).跨域:
在settings.py文件中:
MIDDLEWARE = [
........................
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
........................
]
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)
3.数据库：
数据库我们使用的是mysql，数据库名称为：bolg，先建一张很普通的表，表结构如下：
(- - -主要就是用户名和密码的校验,所以这两个字段目前暂时够用- - -)
本次到这里就结束了,很快会与大家再见的哦~~~
