厦门网站建设工程,现在的公司都有自己的网站吗,海口网络公司网站建设,钢材做那个网站好文章目录一、安装并引入 Element1.安装 Element2.引入 Element二、优化登录页面1.使用 Form 组件2.添加样式3.设置背景4.完整代码之前我们实现了登录功能#xff0c;但不得不说登录页面实在是太简陋了。在这个看脸的社会#xff0c;如果代码写的烂#xff0c;界面也做得不好…
文章目录一、安装并引入 Element1.安装 Element2.引入 Element二、优化登录页面1.使用 Form 组件2.添加样式3.设置背景4.完整代码之前我们实现了登录功能但不得不说登录页面实在是太简陋了。在这个看脸的社会如果代码写的烂界面也做得不好看就真的没得救了。但是如果不是专职做 UI 设计又没有必要浪费这么多时间在上面所以我们需要借助一些工具来制作我们的页面。Element - The world’s most popular Vue UI framework你值得拥有。先看一下修改完的登录页面 当然Element 不仅仅是界面这么简单它对 Vue 又做了进一步的封装可以简便地使用许多实用的功能。
一、安装并引入 Element
Element 的官方地址https://element.eleme.cn/#/zh-CN
这一部分的内容在官方文档上都有体现我只是照搬下来。在以后我们会经常使用 Element 提供的组件大家要自己尝试查阅文档这个是中文的还是很好理解的。
1.安装 Element
根据官方文档的描述在项目文件夹下执行 npm i element-ui -S 即可
2.引入 Element
引入分为完整引入和按需引入两种模式按需引入可以缩小项目的体积这里我们选择完整引入。
根据文档我们需要修改 src/main.js 为如下内容
import Vue from vue
import App from ./App
import router from ./router
// 引入ElementUI
import ElementUI from element-ui
import element-ui/lib/theme-chalk/index.cssvar axios require(axios)
// 设置反向代理前端请求默认发送到 http://localhost:8443/api
axios.defaults.baseURL http://localhost:8443/api
// 全局注册之后可在其它组件中通过 this.$axios 发送数据
Vue.prototype.$axios axios
Vue.config.productionTip false
// Vue使用ElementUI
Vue.use(ElementUI)/* eslint-disable no-new */
new Vue({el: #app,render: h h(App),router,components: { App },template: App/
})
这样便完成了 Element 的引入。为了测试一下我们打开 Login.vue把最外层的 div 标签改为 el-card下面是 template 内的完整代码 el-card用户名:nbsp;input typetext v-modelloginForm.username placeholder请输入用户名/brbr密nbsp;nbsp;nbsp;nbsp;码:nbsp;input typepassword v-modelloginForm.password placeholder请输入密码/brbrbutton v-on:clicklogin登录/button/el-card然后访问 http://localhost:8080/#/login 查看效果 嗯还是很丑但是成功了。
二、优化登录页面
首先让我们去掉这个清奇的 V 打开 App.vue把 img src./assets/logo.png 删掉即可。不过我一般喜欢先注释掉确定没有影响了再删除。
1.使用 Form 组件
让我们来修改 Login.vue 的代码。原来是这样的
templateel-card用户名:nbsp;input typetext v-modelloginForm.username placeholder请输入用户名/brbr密nbsp;nbsp;nbsp;nbsp;码:nbsp;input typepassword v-modelloginForm.password placeholder请输入密码/brbrbutton v-on:clicklogin登录/button/el-card
/templatescriptexport default {name: Login,data () {return {loginForm: {username: ,password: },responseResult: []}},methods: {login () {this.$axios.post(/login, {username: this.loginForm.username,password: this.loginForm.password}).then(successResponse {if (successResponse.data.code 200) {this.$router.replace({path: /index})}}).catch(failResponse {})}}
}
/script
为了设计界面我们需要关注的地方是 template 标签内的 html 和 style 标签内的 css。登录框我们一般会用 Form 来做打开 Element 的组件文档http://element-cn.eleme.io/#/zh-CN/component/发现它为我们提供了丰富的 Form 组件我们可以点击“显示代码”复制我们需要的部分。 不过这里好像并没有特别符合我们应用场景的表单或者说这些都是比较复杂的我们只需要其中的一小部分。把页面再往下拉可以看到关于这个组件的属性、事件、方法等的文档根据这个文档我们可以自己去构建需要的表单。
首先我们修改 template 里的代码如下
templateel-form classlogin-container label-positionleftlabel-width0pxh3 classlogin_title系统登录/h3el-form-itemel-input typetext v-modelloginForm.usernameauto-completeoff placeholder账号/el-input/el-form-itemel-form-itemel-input typepassword v-modelloginForm.passwordauto-completeoff placeholder密码/el-input/el-form-itemel-form-item stylewidth: 100%el-button typeprimary stylewidth: 100%;background: #505458;border: none v-on:clicklogin登录/el-button/el-form-item/el-form
/template上面的代码应该很好理解el-form 里面可以放置 el-form-itemel-form-item 里面再放置其它的内容比如 el-input关于 el-input 的属性可以查阅 Input 的文档el-button 亦然。
在开发前端的内容时我们修改了代码就可以对应地看到效果而不用重启项目。我一般会把浏览器也开着以便实时监测。修改完上面的内容页面变成了这样
2.添加样式
为了进一步优化界面我们为组件再添加一些样式即在 Login.vue 的最后添加如下代码
style.login-container {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;}/style
刷新页面Ctrl F5看起来顺眼多了
3.设置背景
最后我们为这个单调的登录页面设置一个背景。我在网上找了这张图 可以把它保存下来放在 src\assets 文件夹下命名为 eva.jpg 在 build 项目时这个文件夹里的图片会被自动转成 base64。也可以在这个文件夹里再新建文件夹方便管理。
为了使用背景图片我在 标签的外又添加了一个父标签 bodyid 设置为 poster并在 style 中添加如下内容
body idposter/body#poster {background:url(../assets/eva.jpg) no-repeat;background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;}body{margin: 0px;}这时候发现界面上方有一片空白经过查找发现问题出在 App.vue 里把下面这句代码删除即可 OK又一次大功告成了。 另外可以在 Login.vue 的 data 方法中设置输入框的默认值省的每次进来都要再输一遍。
4.完整代码
最后附上 Login.vue 的完整代码可以直接复制
templatebody idposterel-form classlogin-container label-positionleftlabel-width0pxh3 classlogin_title系统登录/h3el-form-itemel-input typetext v-modelloginForm.usernameauto-completeoff placeholder账号/el-input/el-form-itemel-form-itemel-input typepassword v-modelloginForm.passwordauto-completeoff placeholder密码/el-input/el-form-itemel-form-item stylewidth: 100%el-button typeprimary stylewidth: 100%;background: #505458;border: none v-on:clicklogin登录/el-button/el-form-item/el-form/body
/templatescriptexport default {name: Login,data () {return {loginForm: {username: admin,password: 123},responseResult: []}},methods: {login () {this.$axios.post(/login, {username: this.loginForm.username,password: this.loginForm.password}).then(successResponse {if (successResponse.data.code 200) {this.$router.replace({path: /index})}}).catch(failResponse {})}}}
/scriptstyle#poster {background:url(../assets/eva.jpg) no-repeat;background-position: center;height: 100%;width: 100%;background-size: cover;position: fixed;}body{margin: 0px;}.login-container {border-radius: 15px;background-clip: padding-box;margin: 90px auto;width: 350px;padding: 35px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;}
/style至此登录页面的开发似乎已经较为完善了但其实还没有完因为这个登录页面其实没有用别人直接输入首页的网址就可以绕过登录页面。为了让它发挥作用我们还需要开发一个拦截器。
下一篇文章主要讲解以下内容
一、前端路由的 hash 模式与 history 模式二、history 模式下后端错误页面的配置三、登录拦截的实现
为什么要在登录页面上废这么多篇幅呢因为把这个页面做完就差不多理解了项目的构成之后的开发就可以把精力集中在业务功能的实现上了。之后的基本模式就是前端开发组件、后端开发控制器调试功能做起来会很快。
