前言:其实在很早之前就有这种想法了,只不过一直比较忙没有进行实践,最近写出来和大家分享分享,一起来实现一个属于自己的博客系统。

开发环境:

前端:webpack+vue,

后端:Django不懂的小伙伴可以移步搭建第一个Django项目,

数据库:mysql

一.项目简介:
二.项目搭建:
- 1.前端:
- - (1).项目的目录:
  - (2).组件以及axios:
  - (3).登录界面:
  - - html代码:
    - css代码:
    - js代码:
- 2.后端:
- - (1).新建views文件：
  - (2).连接mysql:
  - (3).文件使用:
  - (4).服务开启:
  - (5).跨域:
- 3.数据库：

一.项目简介:

普遍的博客系统都会有登录、注册、首页、博文页、查看详情等页面，主要的就是数据的交互(本来想使用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">密&nbsp;&nbsp;&nbsp;码：</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 = TrueCORS_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，先建一张很普通的表，表结构如下：

(- - -主要就是用户名和密码的校验,所以这两个字段目前暂时够用- - -)

本次到这里就结束了,很快会与大家再见的哦~~~

从零到一搭建一个属于自己的博客系统(弌)相关推荐

自己动手搭网站（六）：javaweb搭建一个简单的个人博客系统
目录前言一.一点建网站的背景知识二.个人博客系统介绍 1.核心功能和数据库 2.前端页面 3.后端 servlet service层 dao层配置文件参考资料前言这篇博主会介绍下我用ja ...
如何搭建一个属于自己的博客网站？（小白教程）
如何搭建一个属于自己的博客网站?(小白教程) 一.准备阶段二.搭建阶段 1.服务器阶段 2.宝塔面板阶段 3.WordPress阶段三.结尾语欢迎大家访问我的个人博客:endeavorchuan ...
如何搭建一个属于自己的博客网站？
很多人包括我在内,都希望能有一个自己的博客网站,但大部分人都不知道从何处着手,但实际上建立一个博客网站并没有想象的那么复杂,即便我们不是很懂技术,也可以做一个属于自己的网站.以下是我建立个人网站的一些 ...
教你三分钟用docker compose搭建一个自己的个人博客网站
hi,大家好,我是 jack xu,今天和大家聊一个轻松.好玩.易懂的话题,就是教大家搭建一个自己的个人博客网站,可以在同事朋友面前炫耀一把.事情的缘由是我们公司有个同事,有一天他给了我一个网站,我打 ...
如何搭建一个属于自己的博客/企业网站？
本文首发于 Guanngxu 的个人博客:如何搭建一个属于自己的博客/企业网站本文参考内容: 如何做博客/企业站以及注意事项 Typecho支持Emoji表情方法说明:此篇文章得益于王红星的指导, ...
Hexo+gitee：30分钟搭建一个自己的个人博客网站欢迎友链呀＜(▰˘◡˘▰)
Hexo + Gitee 部署自己的个人博客目前市场上比较火的一些博客框架: Hexo.jekyll.Solo.Halo .gohugo.VuePress.wordpress 等等 ,这些都是开 ...
Docker学习之路05：五分钟用docker compose搭建一个自己的个人博客网站！
五分钟用docker compose搭建一个自己的个人博客网站! Docker学习路线传送门: Docker学习之路01:Docker的安装 Docker学习之路02:阿里云镜像加速器 Docker学 ...
如何用 windows+github搭建一个优美的hexo博客
如何用 windows+github搭建一个优美的hexo博客 1.Hexo简单介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内, ...
初学者入门：使用WordPress搭建一个专属自己的博客
体验简介阿里云云起实验室提供相关实验资源,点击前往场景将提供一台基础环境为CentOS 的ECS(云服务器)实例,这台服务器上已经内置LAMP环境.我们将会在这台服务器上安装 WordPress ...

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

目录: