VUE构建前后端分离的前端项目

VUE构建前后端分离的前端项目（超详细）

1.使用vue-cli创建项目
2.使用elementUI组件编写页面
3.使用axios与后台交互
4.使用webpack构建工具打包
5.部署到Tomcat

1.技术背景

前后端分离的优势：

1. 分工明确，提高工作效率，前端主要关注页面、用户体验，后端主要关注业务、安全。
2. 性能提升，前端通过路由配置实现按需加载，后端无需解析前端页面。
3. 前后端同时开发，提升开发效率。
4. 发现BUG可以快速定位问题，代码的重构和可维护性强，降低维护成本。
5. 分离部署，静态资源由前端服务器处理，减轻后端服务器压力。

技术背景

1. VUE：轻量级，单页面，只关注视图层不操作DOM，MVVM响应式双向数据绑定，组件化思想，运行速度快，社区活跃，简单易上手。
2. elementUI：饿了么前端团队开发的组件库，文档详细，风格简洁，内置过渡动画，组件切换效果生动，
3. axios：vue官方建议使用，从浏览器中创建XMLHTTPRequests、支持Promise
4. API、拦截器请求和响应、自动转换JSON数据、客户端支持防止CSRF
5. webpack：把所有依赖打包成一个整体，通过代码分割成单元片段并按需加载

2.创建项目

1.安装node环境和vue

在控制台分别输入node –v 和vue –V检测是否安装成功

2.*使用淘宝镜像仓库，加速npm下载

1.由于npm的服务器是在国外的，下载速度慢，配置国内淘宝镜像仓库 npm install cnpm -g --registry=https://registry.npm.taobao.org
2. 使用命令 cnpm install

3.新建项目

打开VS Code，选择一个目录打开，在控制台输入
vue init webpack login（项目名称是login）
按照弹出的项目进行对应配置

最后一步确定之后需要等待几分钟下载模板

4.目录结构

build – 构建相关
config – 配置
assets – 静态资源
components – 全局公用组件
router – 路由
utils – 公用方法
APP.vue – 入口页面
main.js – 入口文件，加载组件和初始化
static – 静态资源

5.vue文件结构

html模板写在template标签里面，且内部只能包含一个根元素。
components：组件注册，局部声明组件。
data：数据。
mounted：模板渲染成html后调用。
methods：方法定义。

vue的生命周期（vue实例从创建到销毁的过程）

beforeCreate: 创建前(数据观测和事件配置之前)，实例初始化之后调用
created: 创建(实例已经创建完成之后被调用)
beforeMount:挂载前
mounted:挂载
beforeUpdate: 更改前
updated: 更新
beforeDestroy:销毁前
destroyed:销毁

6.启动项目

下载完成后根据提示：进入login目录，运行项目

cd login

npm run dev

可以看到vue的专属欢迎页面

7.安装elementUI组件库，创建页面

在控制台输入npm - element-ui –S 开始下载模块

下载完毕后，在main.js引用组件库

使用el-form/ el-input/ el-button组件完成如图所示的登录页面

8.配置路由

进入router目录下的index.js 文件配置路由，将默认的HelloWorld删掉，路由根节点改成新增加的登录页面。这样打开项目默认显示的就是登录页面

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/login'

Vue.use(Router)

export default new Router({
   
  mode: 'hash',
  routes: [
    {
   
      path: '/',
      name: 'login',
      component: Login,
    }
  ]
})

9.实现登录功能

①安装axios和qs模块：分别在控制台输入npm install axios 和npm install qs


②前后端分离项目存在跨域问题，开发的时候需要配置proxyTable代理解决跨域问题
打开config目录下的index.js文件，在dev项的ProxyTable添加代码

proxyTable: {
   
      '/ppu/web/*': {
   
        target: 'http://172.16.28.186:8080', // 目标接口域名
        changeOrigin: true // 是否跨域
      }
    },

tip：在ProxyTable下面有个port项，默认值是8080，这是前端启动的端口号，可以将它改掉，否则如果先启动前端，后端就会因为端口占用而无法启动了。

③访问接口
由于ppu登录需要使用aes对用户名和密码进行加密，所以这边需要先下载相关插件JAVA VUE前后端使用aes对用户名密码加密

④在登录页面login.vue 引入axios和qs

import axios from 'axios'
import qs from 'qs'

⑤在登录按钮的点击事件login里面添加代码访问登录接口,post需要配置请求头和参数格式(这部分代码后文会改，就不贴代码了)

3.axios和接口封装

在前后端交互方面采用axios，为了便于维护和复用，避免每个页面都引入一次axios和qs、避免每个接口都进行请求头配置，我们可以对axios进行封装。

1.封装axios

在src目录下创建utils目录，在utils目录下新建文件http.js，用来封装axios
①首先引入axios和qs

import axios from 'axios'
import qs from 'qs'

②设置请求接口的超时时间是10秒

axios.defaults.timeout = 10000

③由于例子使用的接口有公共的部分/ppu/web，直接设置axios请求的公共路径/ppu/web