SpringBoot + Spring Cloud +Vue 管理系统前端搭建（二、visual studio code开发前端项目）
SpringBoot + Spring Cloud +Vue 管理系统前端搭建（二、visual studio code开发前端项目）
我们打开visual studio code , 选择文件------------->将文件夹添加到工作区，导入我们的项目
安装Element
导入后，我们安装以下element
官网：https://element.eleme.cn/#/zh-CN/component/installation
安装命令：npm add element-ui或者也可以用yarn
安装完成后，我们在main.js中引入Element
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
页面路由
我们把components改名为views,并在目录下添加3个页面：Login.vue、Home.vue、404.vue。
页面内容类似：
<template>
<div>
<h2>Login Page</h2>
</div>
</template>
<script>
export default {
name: 'Login'
}
</script>
配置路由
打开router/index.js,添加3个路由分别对应主页、登录、404页面
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import NotFound from '@/views/404'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}, {
path: '/login',
name: 'Login',
component: Login
}, {
path: '/404',
name: 'notFound',
component: NotFound
}
]
})
配置完后启动项目，在浏览器访问测试
http://localhost:8080/#/
http://localhost:8080/#/login
http://localhost:8080/#/404
说明我们的配置已经生效了
安装scss
安装依赖：
npm uninstall sass-loader //卸载当前版本）
npm install sass-loader@7.3.1 --save-dev //卸了重新安装了一个低版本
npm install node-sass@4.14.1 --save-dev //安装node-sass
安装的时候注意对应版本，版本不对应，启动会报错
安装后修改404页面
<template>
<div class="site-wrapper site-page--not-found">
<div>
<div>
<h2>404</h2>
<p>抱歉！您访问的页面<em>失联</em>啦 ...</p>
<el-button @click="$router.go(-1)">返回上一页</el-button>
<el-button type="primary" @click="$router.push('/')">进入首页</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: '404'
}
</script>
<style>
.site-wrapper.site-page--not-found {
position: absolute;
top: 60px;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
.site-content__wrapper {
padding: 0;
margin: 0;
background-color: #fff;
}
.site-content {
position: fixed;
top: 15%;
left: 50%;
z-index: 2;
padding: 30px;
text-align: center;
transform: translate(-50%, 0);
}
.not-found-title {
margin: 20px 0 15px;
font-size: 8em;
font-weight: 500;
color: rgb(55, 71, 79);
}
.not-found-desc {
margin: 0 0 30px;
font-size: 26px;
text-transform: uppercase;
color: rgb(118, 131, 143);
> em {
font-style: normal;
color: #ee8145;
}
}
.not-found-btn-gohome {
margin-left: 30px;
}
}
</style>
再浏览器访问http://localhost:8080/#/404
可以看到样式改变了
安装axios
命令：npm install axios
安装完成后修改Home页面，进行一个简单的测试
<template>
<div>
<h2>Home Page</h2>
<el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
</div>
</template>
<script>
import axios from 'axios'
import mock from '@/mock/mock.js'
export default {
name: 'Home',
methods: {
testAxios() {
axios.get('http://localhost:8080').then(res => { alert(res.data) })
}
}
}
</script>
可以看到我们的请求已经成功了
安装Mock.js
为了模拟后台接口提供页面需要的数据，引入mock.js
安装依赖：npm install mockjs -dev
安装完成，在src新建一个mock目录，创建mock.js，在里面模拟两个接口，分别拦截用户和菜单的请求并返回相应数据。
import Mock from 'mockjs'
Mock.mock('http://localhost:8080/user', {
'name': '@name', // 随机生成姓名
'name': '@email', // 随机生成邮箱
'age|1-12': 7, // 年龄1-12之间
})
Mock.mock('http://localhost:8080/menu', {
'id': '@increment', // id自增
'name': 'menu', // 名称为menu
'order|1-10': 6, // 排序1-10之间
})
修改Home.vue,在页面添加两个按钮，分别触发用户和菜单请求。成功后弹出返回结果
注意：要在页面引入mock import mock from '@/mock/mock.js'
Home.vue
<template>
<div>
<h2>Home Page</h2>
<el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
<el-button type="primary" @click="getUser()">获取用户信息</el-button>
<el-button type="primary" @click="getMenu()">获取菜单信息</el-button>
</div>
</template>
<script>
import axios from 'axios'
import mock from '@/mock/mock.js'
export default {
name: 'Home',
methods: {
testAxios() {
axios.get('http://localhost:8080').then(res => { alert(res.data) })
},
getUser() {
axios.get('http://localhost:8080/user').then(res => { alert(JSON.stringify(res.data)) })
},
getMenu() {
axios.get('http://localhost:8080/menu').then(res => { alert(JSON.stringify(res.data)) })
}
}
}
</script>
访问http://localhost:8080/#/
点击获取用户信息
点击获取菜单信息
可以看到我们已经得到响应数据，这样mock就集成进来了
看完记得点赞哦
————————————————
版权声明：本文为CSDN博主「Java璐到底」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/JavaLLU/article/details/116569555