vue若依前端项目搭建

1.项目搭建

首先进入到你需要创建的项目目录下面，然后输入命令vue create .创建项目
接下来选择手动搭建，然后把下面图片中的内容选上

再然后继续配置一些参数信息

接下来运行npm run serve项目就启动起来了

2.配置登录界面文件

首先修改src/router/index.js这个界面，写若依的登录界面
先把这一串内容删除掉

{
  path: '/',
  name: 'home',
  component: HomeView
},
1
2
3
4
5

然后修改src/router/index.js下面的内容

const routes = [
  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/login.vue')
  }
]
1
2
3
4
5
6
7
8
9
10

接下来到package.json下面打开lint的调试

然后把app.vue上面的导航部分删除掉

打开login的界面

注意这里的#号必须放在login的前面
查看package.json下面的dependencies之中是否存在着element-ui，如果不存在使用命令安装

npm install --save element-ui
1

并且把depencies之中的

"element-ui": "^2.15.14"
1

加入到下面的devDependencies之中
然后打开src/main.js之中，加入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element-UI)
1
2
3

注意这里的特定index.css样式一定要引入，不然显示的样式跟element-ui官网中显示的样式不同
然后首先把背景图片放入src/assets/images/login-background.jpg，接着在login.vue之中先写界面

<template>
    <div class="login">
        <el-form class="login-form">
            <h3>管理系统h3>
            <el-form-item>
            el-form-item>
        el-form>
        <div class="el-login-footer">
            <span>opyright © 2018-2021 ruoyi.vip All Rights Reserved.span>
        div>
    div>
template>
1
2
3
4
5
6
7
8
9
10
11
12

然后在style之中加入配置

1
2
3
4
5
6
7

3.写登录文件的样式

首先把页面定义出来

<template>
    <div class="login">
        <el-form class="login-form" :model="loginForm">
            <!--这里的login-form是一个对象，在下面的data()中有所定义，否则这里无法进行输入-->
            <h3 class="title">管理系统</h3>
            <el-form-item class="login-item">
                <el-input v-model="loginForm.username" type="text" placeholder="账号"></el-input>
                <!--v-model跟下面data()中的数据绑定,placeholder为显示的提示-->
            </el-form-item>
            <el-form-item class="login-item">
                <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
            </el-form-item>

            <el-form-item class="login-item">
                <el-col :span="15">
                    <el-input class="code-item" v-model="loginForm.code" type="text" placeholder="验证码"></el-input>
                </el-col>
                <el-col :span="9">
                    <el-image class="login-code" :src="codeUrl" @click="getCode"></el-image>
                </el-col>
            </el-form-item>
            <el-form-item class="login-item">
                <el-row>
                  <el-checkbox v-model="loginForm.rememberMe" class="remeberpasswordcheck">记住密码</el-checkbox>
                </el-row>
            </el-form-item>
            <el-form-item class="login-item">
                <el-button class="login-button" type="primary">
                    <span>登录</span>
                </el-button>
            </el-form-item>
        </el-form>
        <div class="el-login-footer">
            <span>Copyright © 2018-2021 ruoyi.vip All Rights Reserved.</span>
        </div>
    </div>
</template>

<script>
import { getCodeImg } from '../api/login'

export default {
  name: 'login',
  data () {
    return {
      loginForm: {
        username: '',
        password: '',
        code: '',
        rememberMe: false
      },
      codeUrl: ''
    }
  },
  created () {
    this.getCode()
  },
  methods: {
    getCode () {
      console.log('getcode')
      getCodeImg().then(res => {
        console.log('gsdres', res)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.login-item {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.login{
    display: flex;
    //display: flex为弹性布局，能够扩展和收缩flex容器内的元素，以最大
    //限度地填充可用空间。Flex是Flexible Box的缩写，为弹性布局ß
    height: 100%;
    background-image: url("../assets/images/login-background.jpg");
    background-size: cover;
    //background-size: cover:背景图片拉伸或者缩放以适应元素，同时保持宽高比
    justify-content: center;//让上下居中
    align-items: center;//左右居中
}
.title{
    color:#707070;
    text-align: center;
    margin: 0px auto 30px auto;
}

//.login定义上面的样式，这里的login证明login这部分占界面的100%，调节完.login-form之后发现字到中间了需要调节

    .login-form{
        width: 400px;
        height: 350px;
        border-radius: 6px;
        background: #fff;
        padding: 25px 25px 5px 20px;//代表三个框在整个白框中的上 右 底 左四个位置的间距
    }
    //这里不加last-child调整大小不变的原因在于element ui自动在外套一层div，因此对其设置的宽度并没有直接设置在文本域上面
    //在last-child中的padding体现在文本框上右底左的间距上

    .code-item :last-child{
        width: 250px;
    }

    .login-code {
        width: 120px;
        float: right;
    }
    /***
    .code-item :last-child{
        height: 20px;
        width: 158px;
        font-size: 15px;
    }
    ***/
    //因为el-text本质上是div拼上普通的text标签，所以这里需要使用last-child取到最里面的标签

    /***
    .code-item{
        padding: 25px 25px 5px 40px;
    }
    ***/

    .el-login-footer{
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 0px;
        color: #fff;
        font-size: 12px;
        //letter-spacing: 1px;
        font-family: Arial;
    }
    //padding为上下左右,调节完.login-form这里发现脚标直接挪移到正中间了，此时需要挪移脚标的位置
    //这里position: fixed为固定定位，bottom:0px将字体放到最下面
.login-button {
    width: 100%;
}

.remeberpasswordcheck {
    float: left;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

这里注意几点内容：
1.如果不知道格式和布局，可以查看element-ui的官网，上面有几种布局样式的定义
2.上面的html语句定义布局，下面的css语句定义样式
3.el-input实际上是div加上普通的input样式
4.如果需要在上面引用数据，则在data上面需要加上要引用的数据

export default {
   ......
   data() {
     return {
       ......
     }
   }
}
1
2
3
4
5
6
7
8

4.页面发送请求需要的相关配置

在页面中我们定义了相应的请求方法

import { getCodeImg } from '../api/login'
......
methods: {
    getCode () {
      console.log('getcode')
      getCodeImg().then(res => {
        console.log('gsdres', res)
      })
    }
  }
1
2
3
4
5
6
7
8
9
10

这里我们首先在根目录下配置.env.development文件

VUE_APP_BASE_URL = '/dev-api'
1

然后在src/utils/request.js下面定义创建service需要默认加入的url，便于前端在后台区分，这个文件定义为request.js

import axios from 'axios'
// 通过axios发送请求
// 这个axios需要从devDependencies传输到dependencies的依赖之中
// 如果没有axios时候需要安装一下！！！
// 有可能devDependencies中没有，但是dependencies中存在axios依赖
// npm install axios
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 10000
})
export default service
1
2
3
4
5
6
7
8
9
10
11

这样定义好之后默认请求前面都会加上url '/dev-api，然后我们定义getCodeImg方法

import request from '../utils/request.js'
export function getCodeImg () {
  return request({
    url: '/captchaImage',
    method: 'get',
    timeout: 20000
  })
}
1
2
3
4
5
6
7
8

最后还需要在vue.config.js之中配置默认的表头替换原则以及路径，注意这个vue.config.js在根目录下面

// const { defineConfig } = require('@vue/cli-service')
// 这个文件是自动生成的，下面的配置是手动加入的
// 手动配置的，在配置完成.env.development之后进行配置
// 代理url，在前端发送url的时候如何转换给后端
module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8008,
    proxy: {
      [process.env.VUE_APP_BASE_URL]: {
        target: 'http://localhost:8080',
        changeOrigin: true,
        // 将发送的url转换成target的地址
        // '^'+process.env.VUE_APP_BASE_URL会转换成空字符串
        // 配置完之后还是访问localhost:8008/#/login登录页面
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_URL]: ''
        }
      },
    },
    historyApiFallback: true,
    allowedHosts: "all",
    //注意如果这里报没有disableHostCheck属性的时候，对应的进行替换
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

由于这个方法在created调用的时候就调用了getCodeImg的请求，因此在浏览器中可以看到发送出的相应请求。

发送请求之后，这里我们可以看到后端返回回来的数据

我们可以通过后端返回的数据生成图片