SpringBoot + Spring Cloud +Vue 管理系统前端搭建（二、visual studio code开发前端项目

淩亂°似流年 2023-01-20 05:58 7阅读 0赞

我们打开visual studio code , 选择文件------------->将文件夹添加到工作区，导入我们的项目

## 安装Element ##

导入后，我们安装以下element

官网：[https://element.eleme.cn/\#/zh-CN/component/installation][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。  
![在这里插入图片描述][202105111538241.png]  
页面内容类似：

<template>
    
    <div class="page">
    
    <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]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70]  
[http://localhost:8080/\#/login][http_localhost_8080_login]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 1]  
[http://localhost:8080/\#/404][http_localhost_8080_404]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 2]  
说明我们的配置已经生效了

## 安装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 class="site-content__wrapper">
    
    <div class="site-content">
    
    <h2 class="not-found-title">404</h2>
    
    <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p>
    
    <el-button @click="$router.go(-1)">返回上一页</el-button>
    
    <el-button type="primary" class="not-found-btn-gohome" @click="$router.push('/')">进入首页</el-button>
    
    </div>
    
    </div>
    
    </div>
    
    </template>
    
     
    
    <script>
    
    export default { 
    name: '404'
    
    }
    
    </script>
    
     
    
    <style lang="scss">
    
    .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][http_localhost_8080_404]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 3]  
可以看到样式改变了

## 安装axios ##

命令：`npm install axios`

安装完成后修改Home页面，进行一个简单的测试

<template>
    
    <div class="page">
    
    <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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 4]  
可以看到我们的请求已经成功了

## 安装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 class="page">
        <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/\#/][http_localhost_8080]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 5]  
点击获取用户信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 6]  
点击获取菜单信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 7]  
可以看到我们已经得到响应数据，这样mock就集成进来了

看完记得点赞哦

[https_element.eleme.cn_zh-CN_component_installation]: https://element.eleme.cn/#/zh-CN/component/installation
[202105111538241.png]: /images/20221021/6f06c48c626c4520b378e552187a7409.png
[http_localhost_8080]: http://localhost:8080/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70]: /images/20221021/891504ef13c94e3ca32b39e5eeb068bc.png
[http_localhost_8080_login]: http://localhost:8080/#/login
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 1]: /images/20221021/a27faba349fb4956b786cd6fcbcc5b38.png
[http_localhost_8080_404]: http://localhost:8080/#/404
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 2]: /images/20221021/be77c0114ad9445d9819cb1e7efb062d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 3]: /images/20221021/8d09ca5343524de6af492df633411fec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 4]: /images/20221021/c3db8a6f5e6e43b7853e09800dcc49fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 5]: /images/20221021/0b59cab7c68944e09d0e6822c082bb90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 6]: /images/20221021/aeaa0fc555e743aaa3e900199eea605f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Byb2dyYW1tZXJfdW5pb24_size_16_color_FFFFFF_t_70 7]: /images/20221021/9d98c79b700e4afc81d00bcf9a557639.png