网络编程和网站建设联系,北京朝阳区优化,1688关键词排名查询工具,已有网站可以做服务器吗1.项目搭建
首先进入到你需要创建的项目目录下面#xff0c;然后输入命令vue create .创建项目 接下来选择手动搭建#xff0c;然后把下面图片中的内容选上 再然后继续配置一些参数信息 接下来运行npm run serve项目就启动起来了
2.配置登录界面文件
首先修改src/router…1.项目搭建
首先进入到你需要创建的项目目录下面然后输入命令vue create .创建项目 接下来选择手动搭建然后把下面图片中的内容选上 再然后继续配置一些参数信息 接下来运行npm run serve项目就启动起来了
2.配置登录界面文件
首先修改src/router/index.js这个界面写若依的登录界面 先把这一串内容删除掉
{path: /,name: home,component: HomeView
},然后修改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)}
]接下来到package.json下面打开lint的调试 然后把app.vue上面的导航部分删除掉 打开login的界面 注意这里的#号必须放在login的前面 查看package.json下面的dependencies之中是否存在着element-ui如果不存在使用命令安装
npm install --save element-ui并且把depencies之中的
element-ui: ^2.15.14加入到下面的devDependencies之中 然后打开src/main.js之中加入
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.css
Vue.use(Element-UI)注意这里的特定index.css样式一定要引入不然显示的样式跟element-ui官网中显示的样式不同 然后首先把背景图片放入src/assets/images/login-background.jpg接着在login.vue之中先写界面
templatediv classloginel-form classlogin-formh3管理系统/h3el-form-item/el-form-item/el-formdiv classel-login-footerspanopyright © 2018-2021 ruoyi.vip All Rights Reserved./span/div/div
/template然后在style之中加入配置
style scoped langscss
.login{height: 100%;
background-image: url(../assets/images/login-background.jpg);
}
//.login定义上面的样式这里的login证明login这部分占界面的100%
/style3.写登录文件的样式
首先把页面定义出来
templatediv classloginel-form classlogin-form :modelloginForm!--这里的login-form是一个对象在下面的data()中有所定义否则这里无法进行输入--h3 classtitle管理系统/h3el-form-item classlogin-itemel-input v-modelloginForm.username typetext placeholder账号/el-input!--v-model跟下面data()中的数据绑定,placeholder为显示的提示--/el-form-itemel-form-item classlogin-itemel-input v-modelloginForm.password typepassword placeholder密码/el-input/el-form-itemel-form-item classlogin-itemel-col :span15el-input classcode-item v-modelloginForm.code typetext placeholder验证码/el-input/el-colel-col :span9el-image classlogin-code :srccodeUrl clickgetCode/el-image/el-col/el-form-itemel-form-item classlogin-itemel-rowel-checkbox v-modelloginForm.rememberMe classremeberpasswordcheck记住密码/el-checkbox/el-row/el-form-itemel-form-item classlogin-itemel-button classlogin-button typeprimaryspan登录/span/el-button/el-form-item/el-formdiv classel-login-footerspanCopyright © 2018-2021 ruoyi.vip All Rights Reserved./span/div/div
/templatescript
import { getCodeImg } from ../api/loginexport 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)})}}
}
/scriptstyle scoped langscss
.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.如果不知道格式和布局可以查看element-ui的官网上面有几种布局样式的定义 2.上面的html语句定义布局下面的css语句定义样式 3.el-input实际上是div加上普通的input样式 4.如果需要在上面引用数据则在data上面需要加上要引用的数据
export default {......data() {return {......}}
}4.页面发送请求需要的相关配置
在页面中我们定义了相应的请求方法
import { getCodeImg } from ../api/login
......
methods: {getCode () {console.log(getcode)getCodeImg().then(res {console.log(gsdres, res)})}}这里我们首先在根目录下配置.env.development文件
VUE_APP_BASE_URL /dev-api然后在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这样定义好之后默认请求前面都会加上url /dev-api然后我们定义getCodeImg方法
import request from ../utils/request.js
export function getCodeImg () {return request({url: /captchaImage,method: get,timeout: 20000})
}最后还需要在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属性的时候对应的进行替换}
}由于这个方法在created调用的时候就调用了getCodeImg的请求因此在浏览器中可以看到发送出的相应请求。 发送请求之后这里我们可以看到后端返回回来的数据 我们可以通过后端返回的数据生成图片
