前后端分离多用户社区项目实战---前端01

Vue前端页面开发

1、前言

技术栈：

• Vue
• Vuex
• Vue Router
• Axios
• Bulma
• Buefy
• Layui
• Vditor
• DarkReader

2、项目演示

3、环境搭建

安装Vue的环境，Vue官方文档

1、Nodejs安装

• Node.js：http://nodejs.cn/download/
  安装就是无脑的下一步就好，安装在自己的环境目录下

• 检查时候安装成功

  • cmd下输入node -v，查看是否能够正确打印出版本号即可！
  • cmd下输入npm -v，查看是否能够正确打印出版本号即可！
  • 这个npm，就是一个软件包管理工具，就和linux下的apt软件安装差不多！

• 修改全局依赖包下载路径

  可以通过npm root -g 查看当前存放的位置

  我们不想让全局包放在这里，我们可以自定义存放目录,在CMD窗口执行以下两条命令修改默认路径：

  npm config set prefix "D:\Program Files (x86)\nodejs\node_global"
  

  npm config set cache "D:\Program Files (x86)\nodejs\node_globalnode_cache"
  

• 设置淘宝源，让我们下载速度快的飞起

  # 安装淘宝npm
  npm config set registry http://registry.npm.taobao.org/
  

• 安装 vue-cli

  # vue-cli 安装依赖包
  npm install -g vue-cli
  

4、新建项目

参考官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html

可以通过vue create或者vue ui创建项目，这里我使用vue ui，是@vue/cli3.0增加一个可视化项目管理工具，可以运行项目、打包项目，检查等操作。

# 打开vue的可视化管理工具界面
vue ui

运行vue ui之后，会为我们打开一个http://localhost:8080的页面：

然后点击创建，填写项目名称

注意：创建的目录最好是和你运行vue ui同一级。这样方便管理和切换。

下一步，选择【手动】，再点击下一步，如图点击按钮，勾选上路由Router、状态管理Vuex，去掉js的校验【正式项目中加上】。

下一步，也选上【Use history mode for router】，点击创建项目，然后弹窗中选择按钮【创建项目，不保存预设】，就进入项目创建啦。

上述步骤，帮助我们创建了一个vue项目，并且安装了Router、Vuex。这样我们后面就可以直接使用。

我们可以看一下vueblog-vue的项目结构

在创建vue 的项目中执行http://localhost:8080/

我们得到

将项目用idea打开，安装vue插件

我们可以从package.json中看到，我们已经引入的依赖

"dependencies": {
  "core-js": "^3.6.5",
  "vue": "^2.6.11",
  "vue-router": "^3.2.0",
  "vuex": "^3.4.0"
}

安装buefy

官网：https://buefy.org/

在我们的项目根目录用命令

# 安装buefy，帮助我们写css
npm install buefy

在main.js中引入buefy依赖

//引入buefy
import Buefy from "buefy";
import 'buefy/dist/buefy.css'

Vue.use(Buefy);

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

安装element-ui

安装element-ui组件(https://element.eleme.cn/#/zh-CN/component/installation), 帮助我们开发出好看的博客页面

在我们的项目根目录用命令

# 安装element-ui
npm install element-ui -S

在main.js中引入elementui依赖

//引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

安装Axios

接下来，安装Axios（http://www.axios-js.com/zh-cn/docs/）

使用 npm:

npm install --save axios vue-axios

将下面代码加入main.js:

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

我们可以利用Axios完成，从浏览器中创建、转换请求数据和响应数据、拦截请求和响应

组件中，我们就可以通过this.$axios.get()来发起我们的请求了。

创建request.js用于处理axios请求

• 配置axios的baseURL

• 请求拦截器request，发请求前做的一些处理、接收到响应数据并成功后的处理

• 设置cross跨域

• utils.request.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 1.创建axios实例
const service = axios.create({
    // 公共接口--这里注意后面会讲,url = base url + request url
    baseURL: process.env.VUE_APP_SERVER_URL,

    // baseURL: 'https://api.example.com',
    // 超时时间 单位是ms，这里设置了5s的超时时间
    timeout: 5 * 1000
})

// 2.请求拦截器request interceptor
service.interceptors.request.use(
    config => {
        // 发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        // 注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
        if (store.getters.token) {
            // config.params = {'token': token}    // 如果要求携带在参数中
            // config.headers.token = token;       // 如果要求携带在请求头中
            // bearer：w3c规范
            config.headers['Authorization'] = 'Bearer ' + getToken()
        }
        return config
    },
    error => {
        // do something with request error
        // console.log(error) // for debug
        return Promise.reject(error)
    }
)

// 设置cross跨域 并设置访问权限 允许跨域携带cookie信息,使用JWT可关闭
service.defaults.withCredentials = false

service.interceptors.response.use(
    // 接收到响应数据并成功后的一些共有的处理，关闭loading等
    response => {
        const res = response.data
        // 如果自定义代码不是200，则将其判断为错误。
        if (res.code !== 200) {
            // 50008: 非法Token; 50012: 异地登录; 50014: Token失效;
            if (res.code === 401 || res.code === 50012 || res.code === 50014) {
                // 重新登录
                MessageBox.confirm('会话失效，您可以留在当前页面，或重新登录', '权限不足', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    window.location.href = '#/login'
                })
            } else { // 其他异常直接提示
                Message({
                    showClose: true,
                    message: '⚠' + res.message || 'Error',
                    type: 'error',
                    duration: 3 * 1000
                })
            }
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        /** *** 接收到异常响应的处理开始 *****/
        // console.log('err' + error) // for debug
        Message({
            showClose: true,
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)
export default service

上面代码

// 公共接口--这里注意后面会讲,url = base url + request url
baseURL: process.env.VUE_APP_SERVER_URL,

用到了env，系统配置文件，我们在和package.json文件同目录下创建.env文件，比如配置baseURL

VUE_APP_SERVER_URL = 'http://127.0.0.1:8081'

设置cross跨域

// 设置cross跨域 并设置访问权限 允许跨域携带cookie信息,使用JWT可关闭
service.defaults.withCredentials = false

前后端端口不一样肯定会存在跨域问题，这里处理了前端跨域问题，后台也需要配置

前端api

类似于后端一样，我们在src下创建一个api文件夹，用于封装访问api的请求

• api/billboard.js