前后端分离——个人博客开发

发表于 | | 阅读次数:
字数统计: 1.9k

1 准备工作/创建项目

后端

创建node项目

npm init

npm install express

安装依赖：npm install express --save

创建app.js:

1
2
3
4
5
6
var express = require('express');
var app = express();

app.listen(2333,function(){
    console.log('server is on "http://localhost:2333"');
});

node app.js测试是否能运行；

前端

创建vue项目

vue init webpack client

npm install

测试是否能运行: npm run dev

2 开始进行前后端接口测试

前端页面表单构建

这个随便写个就好了；下次写好了再补上；

ajax请求

vue中请求数据需要使用第三方库axios

安装axios：cnpm install axios --save

1 引入axios并配置基础路径：

（这里涉及到跨域请求node，所以所有请求前都需要添加node的基础地址）

1
2
3
4
5
6
7
// @/main.js

import axios from 'axios' // 引入axios组件
axios.defaults.withCredentials = true // 跨域保存session有用
axios.defaults.baseURL = 'http://localhost:2333' // 打包的时候直接删掉，默认基础路径在这里配置
// 将 axios 赋值给 Vue，方便在子组件里面使用
Vue.prototype.$reqs = axios

由于是跨域请求，所以需要配置withCredentials为true，可以避免每次都被识别为新的请求；

在vue中，可以使用代理去实现跨域，但是这样的话每次需要配置新地址，这里直接采用配置跨域，只需要一次配置。

2 在Login.vue中写登录的具体方法

将如下登录请求代码写在 login方法中，登录的地址为 “/users/login” ，这个接口我们一会儿在node中去写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// client/src/components/login.vue

login () {
      var _this = this
      this.disablebtn = true
      this.loginText = '登录中...'
      // this.$reqs就访问到了main.js中绑定的axios
      this.$reqs.post('/users/login', {
        username: this.username,
        password: this.password
      }).then(function (result) {
        // 成功
        console.log(result)
        _this.disablebtn = false
        _this.loginText = '登录'
      }).catch(function (error) {
        // 失败
        console.log(error)
        _this.disablebtn = false
        _this.loginText = '登录'
      })
    }

这里遇到过一个错误，加上console.log(error)就可以了，说明是因为没有用到error参数引起的报错……【ESLint真的很严格。

后端接口

关于后端，需要注意：

必须使用body-parser中间件解析表单，否则req.body会无法解析，打印为undefied。

使用body-parser后，打印的data为{}。发现是没有解析JSON格式，所以读取不到数据，于是补上之后：

1
2
3
const bodyPaser = require('body-paser')	// express现在不使用body-parser中间件无法解析req
app.use(bodyPaser.json) // 不写这句打印出来的data是{}  
app.use(bodyParser.urlencoded({ extended: false}))

此时可以把代码交给git了，然后再开发：

  1. 打开项目：git init
  2. 提交所有的代码：
    • git add .
    • git commit -m 'msg'
  3. 与github仓库连接：git remote add origin git项目的http地址
  4. 推送：git push -u origin master

3 实现前端开发部分

UI使用iview：npm install iview --save，所以直接配置：

1
2
3
4
// main.js
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView)

主要页面：

  1. 博客主页；
  2. 单文章阅读页；
  3. 后台管理页面：
    • 编辑文章；
    • 文章列表管理；
  4. 登录页；

0）设置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// @/router/index.js
// 在这里设置路由数组
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/modules/index'
import Login from '@/components/login'

Vue.use(Router) 
// 注意：这里我在index.js里面new了一个Router对象，所以之后在main.js里面直接引入就好，不需要再新建一个router对象了，看了很多网页上的例子都是写在main.js里面的；

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/index', // 路径
      name: 'Index', // 名称
      component: Index
    }
  ],
  mode: 'history' // 设置这个可以不自动在url上添加#
})

然后再main.js中设置：

1
2
3
4
5
6
7
8
// @/main.js
import router from './router' // 引入router，这里只写到文件夹就可以，会自动识别到index.js
...
// 由于在index.js中已经新建好了Router对象，这里不用再次建立
...
new Vue({
    router: router // 给vue实例配置路由router
})

1）主页

遇到问题：iView的</Col>标签eslint会报错：Parsing error: x-invalid-end-tag；

解决方法：在.eslintrc.js的rules加上"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]；之后重启vs-code。

写了一个头部组件，之后都可以用到；

2）登录、注册

遇到一个问题，如何给单独页面添加背景色：

解决方法参考这里

1
2
3
4
5
6
7
.finish-wrap
{
 	background-color:rgb(255,255,255);
    height: 100%;
    position: fixed;
    width: 100%;
}
  1. 如果直接在css中设置body的background-color，会导致其他页面的背景色响应改变，所以不可取；所以需要给此页面单独设置类；
  2. position: fixed设置此属性是为了令此页面脱离文档流，因为主页面其实在app.vue中，永远有一个外层的div，必然不能充满整个页面，所以必须脱离文档流；

3） 写文章

mavonEditor

参考

直接全局引入有问题，不知道为什么老报错，于是这里直接作为组件引入，参考文章；

  • 上传头像

头像展示的src设置，获取上传后的图片src；

4）个人主页

5）账号设置

6） 后台管理页面

  • 发表文章统计页面：引入echarts，npm install echarts --save；

7）消息页面

cell的点击事件不设置为click.native就不生效；

8） 搜索页面

关于session；

4 后端开发部分

npm: mongoose cookie-parser

关于express

  • 路由功能；
  • 集成了很多模板引擎；

登录注册

考虑到表单有检测事件，不适合做回车触发，所以删除了这个功能；

这样会导致还没触发rule就直接给后端发送http请求；

TODO： 第三方账号登录；

mongoose

1
2
// 连接数据库
mongoose.connect('mongodb://localhost:27017/blog', { useNewUrlParser: true})

连接数据库时，如果不加第二个参数，会报错；

对于mongodb来说，不用担心数据库是否存在，会自动创建；

异步查询必须使用sync await，非异步无法返回对应数据；【当然其实我觉得可以不异步？？？用可视化看看就知道了；

可视化工具：living-mongo

用户名唯一

unique: true

必须在连接里加上useCreateIndex: true,否则终端控制台报错；

加密

依赖： bcrypt

功能补全 2019-5-13 我可以！！！！

1）注册

注册成功也需要注入vuex跳转；

2）登录

关于如何使用vuex记录登录状态；

安装vuex：cnpm install vuex --save

在main.js文件中引入vuex；

如何使用vuex保存用户状态

第二个参考教程

登录拦截

TODO：

http拦截

发现需要header接口，用来获取头像和昵称；

3）注销

给退出登录加上handleLogout的click事件；

函数内容：

1
2
3
4
handleLogout () {
      this.$store.commit('LOGOUT', '')
      this.$router.push({path: '/login'})
    }

4）添加文章功能

提交文章

文章标题：必填；

时间：自动补充；

内容/标签：可为空；

取消

返回上一页。

关于编辑文章

需要使用路由传参这里是教程

5）搜索功能

TODO： 多个关键词，有问题；异步问题暂时没有解决；

点击跳转也还没做；

6）文章管理

TODO: 多选删除、分页、筛选

编辑文章和删除文章搞定了；

7）账号管理

TODO：菜单栏显示昵称、上传头像

8）标签管理

TODO： 多选删除

9）文章阅读页

搞定啦；没有todo

10）评论管理

参考：

打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(1)：创建项目，完成登录功能

express做登录验证获取req.body为空对象问题

0%