无需美工，使用Vue + Element-ui 搭建一款简易的手机Web页面框架

以前使用vue，都是通过npm方式download下来的，到底下载下来多少文件，心里也没有个数；也有很多公司的项目是使用引入的方式使用的，今天就尝试一下引入vue的方式，加上Element-ui做两个简单的手机web页面。

首先，到相关官网下载js、css文件；

第二步，引入必要的js、css文件，由于这里的后台使用了themeleaf模板，所以以下面的方式引入js、css文件；

<link rel="stylesheet" th:href="@{/mobile/element/index.css}" ><link rel="stylesheet" th:href="@{/mobile/common.css}" ><script th:src="@{/mobile/vue/vue.js}"></script><script th:src="@{/mobile/element/index.js}"></script> <script th:src="@{/mobile/axios/axios.min.js}"></script>

common.css为补充的样式文件：

.el-header { text-align:center; border-bottom: 1px solid #EBEEF5; background-color: #FFF; color: #303133;  line-height: 60px;  position:relative;}.el-footer {  text-align:center; border-top: 1px solid #EBEEF5; background-color: #FFF; color: #303133;  line-height: 60px;  position:relative;}.el-header-fixed{ top:-1px; padding-top:0px;} .el-footer-fixed{ bottom:-1px; padding-bottom:0px;}.el-header-fixed, .el-footer-fixed{ left:0px; right:0px; width:100%; position:fixed; z-index:1000;}.el-span-left { text-align: right; vertical-align: middle; float: left;}.el-span-right { text-align: left; vertical-align: middle; float: right;}.el-main { background-color: #E9EEF3; color: #333; text-align: center; line-height: 160px; margin-top:60px;}.el-form-item__content .el-button--primary { width: 100%;}.el-message-box{ width:auto;}

第三步，画登录页面，完整代码；

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>登录页面 | Login</title><meta name="keywords" content=""><meta name="description" content=""><link rel="stylesheet" th:href="@{/mobile/element/index.css}" ><link rel="stylesheet" th:href="@{/mobile/common.css}" ></head><body> <div id="app"> <el-card class="box-card"> <div slot="header" class="clearfix" style="text-align:center;"> <span>登录界面</span> </div> <div > <el-form ref="loginForm" id="loginForm" :model="loginForm" :rules="rules" method="post" th:action="@{/user/login}" > <el-form-item prop="username" > <el-input type="text" v-model="loginForm.username" @blur="storageName()" name="username" placeholder="请输入用户名" ></el-input> </el-form-item> <el-form-item prop="password" > <el-input type="password" v-model="loginForm.password" name="password" placeholder="请输入密码" ></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit('loginForm')" >登录</el-button> </el-form-item> <el-form-item class="el-span-right" > <el-checkbox v-model="rememberMe" true-label="1" false-label="0" >记住账号</el-checkbox> </el-form-item> </el-form> </div> </el-card> </div> <script th:src="@{/mobile/vue/vue.js}"></script> <script th:src="@{/mobile/element/index.js}"></script>  <script th:src="@{/mobile/axios/axios.min.js}"></script>  <script th:inline="javascript" > new Vue({ el: '#app', data: function() { return { rememberMe:localStorage.getItem("rememberMe")=='1'?'1':'0', title:' ', msg:'[[${session?.SPRING_SECURITY_LAST_EXCEPTION?.message}]]', loginForm: { username: localStorage.getItem("username")?localStorage.getItem("username"):'', password: '' }, rules: { username: [ { required: true, message: '请输入用户名！', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码！', trigger: 'change' } ] } } }, //初始化方法加载 created:function(){ //展示错误提示信息 if(this.msg !='' && this.msg != 'null'){ this.$message.error(this.msg); } }, //监控 watch : { rememberMe:function(val){ if(val=='1'){ //存储在本地缓存 localStorage.setItem("username",this.loginForm.username); localStorage.setItem("rememberMe",val); }else{ localStorage.removeItem("username"); localStorage.removeItem("rememberMe"); } } }, methods: { onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) { //传统的表单提交，页面跳转 document.getElementById(formName).submit(); } else { return false; } }); }, storageName(){ if(this.rememberMe=='1'){ localStorage.setItem("username",this.loginForm.username); localStorage.setItem("rememberMe",this.rememberMe); }else{ localStorage.removeItem("username"); localStorage.removeItem("rememberMe"); } } } })</script></body></html>

启动后效果图

无需美工，使用Vue + Element-ui 搭建一款简易的手机Web页面框架

效果图2

第四步，登录后，首页代码；

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5" >
<!-- Mirrored from www.zi-han.net/theme/hplus/ by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:16:41 GMT --><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp" /> <title>主页面</title>
 <meta name="keywords" content=""> <meta name="description" content="">
 <!--[if lt IE 9]> <meta http-equiv="refresh" content="0;ie.html" /> <![endif]-->  <link rel="stylesheet" th:href="@{/mobile/element/index.css}" > <link rel="stylesheet" th:href="@{/mobile/common.css}" ></head><body> <div id="app"> <el-container> <el-header class="el-header-fixed"> <span class="el-span-left" >消息</span> <span>头部菜单</span> <span class="el-span-right" ><el-button type="text" @click="logout()" >退出</el-button></span> </el-header>  <el-main> <el-tag>你好呀~！</el-tag> </el-main> <el-footer class="el-footer-fixed"> <span class="el-span-left" > <el-link href="/user/addPage" >添加用户</el-link> </span> <span>dddddd</span> <span class="el-span-right" > <el-link href="/user/list" >用户列表</el-link> </span>  </el-footer> </el-container> </div> <script th:src="@{/mobile/vue/vue.js}"></script> <script th:src="@{/mobile/element/index.js}"></script>  <script th:src="@{/mobile/axios/axios.min.js}"></script> <script th:inline="javascript" > new Vue({ el: '#app', data: function() { return { leftTitle: ' ', title:'主页 ', } }, methods:{ logout(){ this.$confirm('确认要退出吗？') .then(_ => { axios.get('/logout') .then(function (response) { //console.log(response); location.href="/login"; }) .catch(function (error) { console.log(error); }); }) .catch(_ => {}); } } });</script></body></html>

登录后首页效果图

第五，新增页面代码；

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Insert title here</title><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" th:href="@{/mobile/element/index.css}" ><link rel="stylesheet" th:href="@{/mobile/common.css}" ></head><body> <div id="app"> <el-container> <el-header class="el-header-fixed"> <span class="el-span-left" >返回</span> <span>头部菜单</span> <span class="el-span-right" >菜单</span> </el-header>  <el-main> <el-form ref="userForm" :model="userForm" :rules="rules" > <el-form-item prop="username" > <el-input v-model="userForm.username" placeholder="请输入姓名" ></el-input> </el-form-item> <el-form-item prop="entUid" > <el-select v-model="userForm.entUid" clearable filterable placeholder="请选择"> <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item>  <el-form-item prop="date" > <el-date-picker v-model="userForm.date" type="datetime" placeholder="选择日期"></el-date-picker> </el-form-item>  <el-form-item prop="remark" > <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="userForm.remark"> </el-input> </el-form-item> <el-form-item>  <el-upload class="upload-demo" action="/fileupload/upload"  :file-list="fileList" multiple :limit="6" accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF" :on-exceed="handleExceed" :on-change="handleChange" :on-success="handleSuccess" :on-remove="handleRemove"> <el-button size="small" type="primary" v-if="uploadButtonShow" plain >点击上传</el-button> <div slot="tip" class="el-upload__tip" v-if="uploadButtonShow" >只能上传图片，且不超过500kb</div> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item> <el-form-item>  <el-button type="primary" @click="onSubmit('userForm')" >保存</el-button> </el-form-item> </el-form> </el-main> <el-footer class="el-footer-fixed"> <span class="el-span-left" > <el-link href="/user/addPage" >底部菜单</el-link> </span> <span>cccc</span> <span class="el-span-right" > <el-link href="/user/list" >底部菜单</el-link> </span>  </el-footer> </el-container>  </div> <script th:src="@{/mobile/vue/vue.js}"></script> <script th:src="@{/mobile/element/index.js}"></script>  <script th:src="@{/mobile/axios/axios.min.js}"></script> <script th:inline="javascript"> new Vue({ el: '#app', data: function() { return { title:' ', selectList: [{value:1,label:'aaaa'},{value:2,label:'bbb'}], fileList: [], dialogImageUrl: '', dialogVisible: false, disabled: false, uploadButtonShow: true, userForm: { entUid: '', username: '', remark: '', img1: '', img2: '', img3: '', img4: '', img5: '', img6: '' }, rules: { username: [ { required: true, message: '用户名不能为空！', trigger: 'blur' } ], entUid: [ { required: true, message: '请选择！', trigger: 'blur' } ], remark: [ { max: 200, message: '备注不能超过200字！', trigger: 'blur' } ] } } }, //初始化方法加载 created: function(){ //企业信息获取 //this.getSelectList(); }, //监控事件 watch: { 'userForm.entUid':function(val){ console.log("你选择了:" + val); } }, methods: { onSubmit(formName) { this.$refs[formName].validate((valid) => { if (valid) { axios.post('/user',this.userForm) .then(res => { if(res.data.code == '200'){ this.$message.success('保存成功！'); //重置表单，可以再次填写 this.$refs[formName].resetFields(); }else{ this.$message.error('保存失败！'); } }) .catch(function (error) { console.log(error); }); } else { return false; } }); }, getSelectList(){ /* var that = this; axios.get('/url') .then(res => { console.log(res.data.rows); that.enterpriseList = res.data.rows; }) .catch(function (error) { console.log(error); }); */ }, handleRemove(file, fileList) { //this.fileList.splice(this.fileList.indexOf(file),1); console.log("asdfasdfasdf" + fileList.length); if(fileList.length>=6){ this.uploadButtonShow = false; }else{ this.uploadButtonShow = true; } }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, handleExceed(files, fileList){ this.$message.error(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); }, handleChange(file, fileList) { //this.fileList = fileList.slice(-3); if(fileList.length>=6){ this.uploadButtonShow = false; }else{ this.uploadButtonShow = true; } }, handleSuccess(res, file, fileList){ if(fileList.length>=6){ this.uploadButtonShow = false; }else{ this.uploadButtonShow = true; } } } })</script></body></html>