阅读 46 SEO

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


文章分类
后端
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐