Vue-cli环境搭建&项目创建&测试Demo
1. vue脚手架环境搭建&项目创建
1.1 安装Node.js(npm)
下载Node.js到本地，npm类似Maven项目，会用到包管理工具下的项目依赖等。
安装完成后查看Node.js版本
$ node-v
$ npm -v
1.2 安装webpack
$ npm install webpack -g
1.3 安装vue-cli到本地
$ npm install vue-cli -g(全局安装)
ps:若不是全局安装需配置环境变量
配置taobao镜像(cnpm)，类似maven项目
$ npm config set registry=http://registry.npm.taobao.org
安装cnpm方法：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm install vue-cli -g
查看安装后vue-cli信息命令：
$ npm info vue-cli
查看vue-cli版本
$ vue -V
1.4.通过vue-cli创建vue项目
$ vue init webpack projectName(项目名)
1.5.启动项目
进入到项目目录
$ cd projectName
启动项目：
$ npm run dev
1.6 npm安装axios到本地
$ npm install --save axios
2. vue-cli 测试Demo
编写发送axios请求工具类
import axios
from 'axios'
const service
= axios
.create({
baseURL
: 'http://localhost:8888',
timeout
: 5000
})
service
.interceptors
.request
.use(config
=> {
console
.log(config
)
return config
}, error
=> {
console
.log(error
)
return Promise
.reject(error
)
})
service
.interceptors
.response
.use(response
=> {
console
.log(response
)
return response
.data
.content
}, error
=> {
console
.log(error
)
return Promise
.reject(error
)
})
export default service
创建一个简单的springboot项目作为测试接口接收请求响应数据
用户登录模块控制层
@CrossOrigin
@RestController
public class LoginController {
@PostMapping("/login")
public HashMap
<String,Object> login(@RequestBody LoginParam loginParam
){
HashMap
<String, Object> res
= new HashMap<>();
String rightName
= "jackson";
String rightPass
= "123";
if(loginParam
.getUserName().equals(rightName
)&&
loginParam
.getPassword().equals(rightPass
)){
res
.put("code", 2000);
res
.put("content", "login success");
res
.put("msg", "OK");
}else {
res
.put("code", 5000);
res
.put("content", "login error");
res
.put("msg", "用户名密码错误");
}
return res
;
}
@GetMapping("/getUserInfo")
public HashMap
<String,Object> getUserInfo(){
HashMap
<String, Object> res
= new HashMap<>();
String rightName
= "jackson";
String rightPass
= "123";
LoginParam loginParam
= new LoginParam(rightName
, rightPass
);
res
.put("code", 2000);
res
.put("content", loginParam
);
return res
;
}
}
展示商品模块控制层
@CrossOrigin
@RestController
public class ProductController {
@PostMapping("/getAllProduct")
public HashMap
<String, Object> getAllProduct(){
Product product1
=
new Product("1","可乐",3);
Product product2
=
new Product("2","雪碧",3);
Product product3
=
new Product("3","芬达",3);
HashMap
<String, Object> res
= new HashMap<>();
ArrayList
<Product> list
= new ArrayList<>();
list
.add(product1
);
list
.add(product2
);
list
.add(product3
);
res
.put("content", list
);
return res
;
}
@GetMapping("/getProductDetailById/{id}")
public HashMap
<String,Object> getProductById(@PathVariable("id") String id
){
Product product1
=
new Product("1","可乐",3);
Product product2
=
new Product("2","雪碧",3);
Product product3
=
new Product("3","芬达",3);
HashMap
<String, Object> res
= new HashMap<>();
switch (id
) {
case "1" :
res
.put("content", product1
);
return res
;
case "2" :
res
.put("content", product2
);
return res
;
case "3" :
res
.put("content", product3
);
return res
;
default:
res
.put("content", null
);
return res
;
}
}
}
编写前端api接口发送异步请求
用户接口
import request
from '@/utils/request'
export function loginByUserNameAndPassword(data
) {
return request({
url
: '/login',
method
: 'post',
data
})
}
export function getUserInfo() {
return request({
url
: '/getUserInfo',
method
: 'get',
})
}
商品接口
import request
from '@/utils/request'
export function getAllProduct(data
) {
return request({
url
: '/getAllProduct',
method
: 'post',
data
})
}
export function getProductDetailById(id
) {
return request({
url
: '/getProductDetailById/'+id
,
method
: 'get',
})
}
创建登录组件，商品组件，商品详情组件。组件中引入api中创建的方法，接收到后端响应的数据显示到页面，响应的格式统一为json格式。
import {
getAllProduct
,
getProductDetailById
} from '@/api/xxxx'
export default {
name
: 'HelloWorld',
data() {
return {
msg
: 'Hello Murabito',
productList
: []
}
},
methods
: {
}
商品列表组件使用钩子函数实现页面加载时执行查询商品列表方法，功能类似created()方法
mounted() {
this.getProductList()
}
将新增加的组件分别添加到路由中
import Vue
from 'vue'
import Router
from 'vue-router'
import HelloWorld
from '@/components/HelloWorld'
import login
from '@/components/login'
import productDetail
from '@/components/productDetail'
Vue
.use(Router
)
export default new Router({
routes
: [
{
path
: '/',
name
: 'HelloWorld',
component
: HelloWorld
},
{
path
: '/login',
name
: 'login',
component
: login
,
},
{
path
: '/productDetail',
name
: 'productDetail',
component
: productDetail
,
}
]
})
在main.js中引入样式资源
import mui
from '../static/mui/js/mui.js'
import '../static/mui/css/mui.css'
Vue
.prototype
.$mui
= mui
测试两种路由跳转页面的方法，区别在于刷新页面后数据是否会丢失
this.$router
.push({
name
:'productDetail',
params
:{
id
: id
}
})
获取页面跳转携带的参数查询商品详情
mounted() {
let id
= this.$route
.params
.id
getProductDetailById(id
).then(res
=>{
alert(JSON.stringify(res
))
this.productDetail
= res
})
}
登录成功后在后端做数据校验
使用Jwt工具类生成token，添加到浏览器的Cookie中
String token
= JWTUtil
.generateToken(user
, Const
.PRIVATE_KEY
, 30);
CookieUtil
.responseCookie(token
,response
);
拿到token做非空校验
@RequestHeader("token") String token
if(StringUtils
.isEmpty(token
) || token
.equals("undefined")){
return new ServerResponse(500, "token不能为空");
}
