前言:其实在很早之前就有这种想法了,只不过一直比较忙没有进行实践,最近写出来和大家分享分享,一起来实现一个属于自己的博客系统。
开发环境:
一.项目简介:
普遍的博客系统都会有登录、注册、首页、博文页、查看详情等页面，主要的就是数据的交互(本来想使用 node 来进行后端服务的,但是之前用过 node 所以想这次换一种语言。)。本次主要是个人进行整体的开发，如若哪儿有问题还希望大家多多指导，今天主要完成登录界面以及其所有的功能。
二.项目搭建:
1.前端:
我们使用 vue 来进行项目的搭建,使用vue init webpack my-project来进行项目的搭建,完成之后使用npm install来下载所需要的依赖包,接下来我们npm run dev来运行我们的项目(因为我已经开始写了,就不给大家看初始界面的样子了)
(1).项目的目录:
(2).组件以及 axios:
我们使用 vue,那么就要用到它的特点进行组件化开发,开发组件使用的是element-ui中的组件
import login from '@/login/Login' //引入文件
export default new Router({ routes: [{ path: '/', name: 'login', component: login } ]})
复制代码
在终端输入以下命令进行下载依赖包
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进行发送请求,那么我们也需要对其进行安装配置:
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的包:
然后在views.py中进行引入:
from django.http import HttpResponse,JsonResponseimport 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 = TrueCORS_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，先建一张很普通的表，表结构如下：
(- - -主要就是用户名和密码的校验,所以这两个字段目前暂时够用- - -)
本次到这里就结束了,很快会与大家再见的哦~~~
评论