前后端分离-vue基础开发框架搭建

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/u010646960/article/details/89817703

• 开始前准备环境 

 在node官网（https://nodejs.org/en）下载node，安装并验证是否安装成功，验证方法win+r输入cmd回车，如下图：

 

 

在终端界面输入：node -v 会出现node版本号，输入npm -version 会出现npm的版本号。

为npm设置淘宝镜像：

在cmd终端输入：npm config set registry http://registry.npm.taobao.org/，设置为淘宝镜像。

在cmd终端输入：npm config set registry https://registry.npmjs.org/，设置为原来的。

node安装成功后，安装vue cli，vue cli是vue的手脚架工具，安装方法：nmp install -g vue-cli ，至此前面的环境准备工作已经完成。

• 新建vue项目

 终端cd到项目文件夹下面输入：vue init webpack 项目名称

例如输入：vue init webpack myvue，就会出现一下vue创建选项，根据自身项目自己做选择，如下图：

结尾会出现启动方法，至此新建已完成，稍微修改一下配置文件，在package.json里面修改如下图位置加上--open，运行时会自动在默认浏览器打开网页：

• 目录结构调整

 

 将新创建的vue项目src结构调整为下图结构：

assets：静态资源目录，例如：img，js，css。

components：组件目录。

libs：自定义封装的一些工具js目录，例如：axios。

router: 路由配置目录。

services：前后台交互请求目录

view：界面目录，里面包含子目录，按照菜单栏目分类，同一菜单放在同一目录

 

• 请求封装（axios）

在项目目录下打开终端，在终端输入：npm install axios，安装axios，安装成功后会在package.json出现下图配置：

在src/config目录下创建url.js，内容如下：

[code]const DEV_URL = '/api'  // 调式环境url前缀
const PRO_URL = '/service'// 生产环境url前缀

export default process.env.NODE_ENV === 'development' ? DEV_URL : PRO_URL

上面内容成后，我们在src/libs目录下创建axios.js，内容如下：

[code]import axios from 'axios'
import baseURL from '../../config/url'
import qs from 'qs'

// 响应时间
axios.defaults.timeout = 5000
// 配置cookie
axios.defaults.withCredentials = true
// 配置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 配置接口地址
axios.defaults.baseURL = baseURL

axios.defaults.maxRedirects = 0

// 序列化参数
axios.defaults.paramsSerializer = (params) => {
return qs.stringify(params, {
arrayFormat: 'brackets'
})
}

// 添加请求拦截器
axios.interceptors.request.use(
config => {
// 签名认证,放在请求头，结合后端拦截使用
// var timestamp = new Date().getTime();
// var AppKey = 'db426a9829e4b49a1dcac7b4162da6b6';
// config.headers['timestamp'] = timestamp;
// var md5 = crypto.createHash('md5');
// md5.update(encodeURIComponent(AppKey + timestamp));
// config.headers['sign'] = md5.digest('hex');
// 如果存在 token，将其带入请求头
if (localStorage.token) {
config.headers.Authorization = localStorage.token;
}
return config;
},
err => {
return Promise.reject(err)
}
)
// 返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
res => {
if (res.status === 200) {
// 在此尽量不做提示信息封装
return res;
}
if (res.data.state >= 400 && res.data.state < 500) {
// 可以在此封装提示信息
return res;
} else {
// 可以在此封装提示信息
return res;
}
},
err => {
return Promise.reject(err)
}
)

// post请求方法
export function post(url, params) {
return new Promise((resolve, reject) => {
axios
.post(url, params)
.then(
res => {
resolve(res.data)
},
err => {
reject(err.data)
}
)
.catch(err => {
reject(err.data)
})
})
}

// get请求方法
export function get(url, params) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}

// put请求方法
export function put(url, params) {
return new Promise((resolve, reject) => {
axios
.put(url, {

3ff7
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}

// patch请求方法
export function patch(url, params) {
return new Promise((resolve, reject) => {
axios
.patch(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}

// del请求方法
export function del(url, params) {
return new Promise((resolve, reject) => {
axios.del(url, {
params: params
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}

axios.js封装了支持RESTful API风格的请求，方法有：

• GET：读取（Read）
• POST：新建（Create）
• PUT：更新（Update）
• PATCH：更新（Update），通常是部分更新
• DELETE：删除（Delete）

至此基本的请求方法已经完成，但还没有请求实例，在src/services创建一个test.js，内容如下：

[code]import {
get
} from '@/libs/axios.js'
var RequestMapping = '/enterprise';
export default {
/**
* RequestMapping controller的地址--url
* @param {*} params  传入参数
*/
getAllInfo(params) {
return get(RequestMapping + '/getAllInfo', params);
},
getImgAll(params) {
return get(RequestMapping + '/getImgAll', params);
}
}

如有其他RESTful API风格的请求请在   import {get} from '@/libs/axios.js'   中添加。test.js是我创建的测试文件，在实际的项目中我们应该以实际的功能模块去创建js，方便维护，阅读。创建完成后在src/src/services创建一个index.js，内容如下：

[code]import test from './test'
export default {
test
};

export default中加入刚刚创建的test.js，之后再main.js中添加如下代码

[code]// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import api from '@/services/index'

Vue.config.productionTip = false

// 将api定义为全局变量
Vue.prototype.$api = api

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

随后使用方法如下图所示：

请求示例，请求封装至此已经完成。

• 路由配置修改（在创建项目时选择安装了Vue Router）

在src/router目录下创建routers.js,将路由写在routers.js里面，内容示例如下：

[code]export default [{
path: '/',
name: 'HelloWorld',
meta: {
title: '首页',
},
component: () => import('@/view/HelloWorld.vue')
},{
path: '/test',
name: 'test',
meta: {
title: '测试页',
},
component: () => import('../view/test.vue')
}]

 src/router/index.js改造如下：

[code]import Vue from 'vue'
import Router from 'vue-router'
import routes from './routers'
import iView from 'iview'

Vue.use(Router)

const router = new Router({
routes,
mode: 'history'
})

router.beforeEach((to, from, next) => {
iView.LoadingBar.start()
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})

router.afterEach(to => {
iView.LoadingBar.finish()
window.scrollTo(0, 0)
})

export default router

这样就可以动态修改页面的title，使路由和配置分开。

• 其他资源

开发时需要解决前后端跨域问题，只需要在src/config/index.js下添加如下内容：

在前面的url.js 里面就可以使用

iviewui：一套基于 Vue.js 的高质量UI 组件库。地址：https://www.iviewui.com/

Vuex：是一个专为 Vue.js 应用程序开发的状态管理模式。地址：https://vuex.vuejs.org/zh/