vue+element |
您所在的位置：网站首页 › 做一个购物网页 › vue+element |
vue+element
|
环境配置
本项目使用hbuilderX的脚手架vue cli,创建,使用了vue,vue-router,element-ui这三个框架,数据库存储用到了浏览器自带的IndexedDB,只存储了用户信息,没有存储购物车和收藏夹信息. 项目源码在文档末尾,有兴趣的朋友可以去下载 安装vue-router的命令: 参考:https://router.vuejs.org/zh/installation.html npm install vue-router安装element-ui的命令: 参考:https://element.eleme.cn/#/zh-CN/component/installation npm i element-ui -S 主要界面效果
登录页面主要代码: 欢迎登陆 账号: 密码: 注册 忘记密码 export default { name: 'Login', props: { msg: String }, data() { return { pwdFlag: false, infor: { username: 'Amy', pwd: '', }, //数据库 db: null, // 全部任务清单 List: [], // 添加任务清单 addList: { id: '2018324142', name: 'Mike', password:'123456', sex: '', address:'', birth:'', hobby:'', introduction:'', }, }; }, created() { this.indexedDB(); // this.readList() }, methods: { // 初始化indexedDB indexedDB() { // 打开数据库，两个参数（数据库名字，版本号），如果数据库不存在则创建一个新的库 var request = window.indexedDB.open('Final_Works', '1') // 数据库操作过程中出错，则错误回调被触发 request.onerror = (event) => { console.log(event) } this.request = request // 创建一个新的数据库或者修改数据库版本号时触发 request.onupgradeneeded = (event) => { var db = event.target.result // 创建对象仓库用来存储数据，把id作为keyPath，keyPath必须保证不重复，相当于数据库的主键 var objectStore = db.createObjectStore('UserList', { keyPath: 'id' }) } // 数据库操作一切正常，所有操作后触发 this.request.onsuccess = (event) => { this.db = event.target.result this.readList() } }, //读取数据 readList() { var transaction = this.db.transaction('UserList').objectStore('UserList') var request = transaction.getAll() request.onerror = (event) => { this.$message.error('事务失败') } request.onsuccess = (event) => { this.List = request.result console.log("request.result"); console.log(request.result); } }, changType() { var pwd_input = document.getElementById("pwd"); var pwd_img = document.getElementsByClassName("pwd_img"); // console.log(pwd_img[0].src); console.log(this.pwdFlag); this.pwdFlag = !this.pwdFlag; if (this.pwdFlag == true) { // console.log(pwd_img[0].src); pwd_img[0].style.display = "block"; pwd_img[1].style.display = "none"; pwd_input.type = "text"; } else { pwd_img[0].style.display = "none"; pwd_img[1].style.display = "block"; pwd_input.type = "password"; } }, //登录按钮 loginSubmit() { var loginFlag=false; var tempList=this.List; for(var item in tempList) { console.log(tempList[item]); if((tempList[item].name==this.infor.username || tempList[item].id==this.infor.username) && tempList[item].password==this.infor.pwd){ loginFlag=true; console.log(loginFlag); }else{ console.log(loginFlag); } } if (loginFlag) { this.$router.push('/Index/' + this.infor.username); console.log(this.$router.push('/Index/' + this.infor.username)); // console.log(this.$route.params.name); } else { alert("账号或密码错误"); } console.log(this.infor.username); }, register(){ this.$router.push('/Register'); }, forgetPWD(){ this.$message.warning("请联系管理员修改密码!") } }, } * { box-sizing: border-box; margin: 0px; padding: 0px; background-color: transparent; } #login{ width: 100%; height: 100%; background-image: url(../../public/imgs/bg.jpg); background-size: 100% 100%; } #login>div{ width: 100%; height: 100%; background-color: rgba(255,255,255,0.5); } #login>div>div { position: absolute; width: 800px; height: 400px; left: 50%; /* top: 50%; */ transform: translate(-50%, 0%); } h1 { position: absolute; /* width: 300px; */ height: 60px; left: 50%; /* top: 50%; */ transform: translate(-50%, 0%); margin-top: 15px; text-align: center; font-family: "华文行楷"; color: #00007f; font-size: 75px; /* background-color: #0000FF; */ } #login>div>div>div { position: absolute; width: 380px; height: 400px; left: 50%; top: 380px; transform: translate(-50%, -50%); border: 2px solid white; background-color: white; border-radius: 30px; box-shadow: 10px 10px 10px #ababab; border: 0.5px solid #dcdcdc; background-image: url(../../public/imgs/3.jpg); background-repeat: no-repeat; background-size: 100% 100%; } #login>div>div>div>img { position: absolute; left: 50%; transform: translate(-50%, -45%); width: 150px; height: 150px; border-radius: 50%; border: 2px solid #ff0000; } ul { list-style: none; } form { position: absolute; width: 300px; left: 50%; top: 50%; font-size: 25px; transform: translate(-50%, 15%); /* background-color: #00FF00; */ } input[type=text], input[type=password] { width: 200px; height: 32px; font-size: 17px; margin-top: 5px; border: 1px solid #000000; border-radius: 5px; outline: none; } input[type=button], input[type=reset], input[type=submit] { width: 50px; height: 30px; margin: 5px; margin-top: 10px; } .pwd_img { position: absolute; width: 20px; left: 252px; top: 52px; } .el-link{ margin: 10px 20px; }注册页面主要代码: 欢迎新用户注册 提交 重置 取消 export default { data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { ruleForm: { name: '', //用户昵称 region: '', //用户地址 date1: '', //用户生日 type: [], //用户爱好 resource: '', //用户性别 desc: '', //用户个人简介 pass: '', //密码 checkPass: '', //确认密码 }, activeIndex: '1', rules: { pass: [{ validator: validatePass, trigger: 'blur' }], checkPass: [{ validator: validatePass2, trigger: 'blur' }], name: [{ required: true, message: '请输入昵称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], region: [{ required: true, message: '请选择地区', trigger: 'change' }], date1: [{ type: 'string', //如果type是date,前台传数据会报错 required: true, message: '请选择出生日期', trigger: 'change' }], type: [{ type: 'array', required: true, message: '请至少选择一项爱好', trigger: 'change' }], resource: [{ required: true, message: '请选择性别', trigger: 'change' }], desc: [{ required: true, message: '请填写个人简介', trigger: 'blur' }], }, value: [], options: [{ value: '广东', label: '广东', children: [{ value: '广州', label: '广州', }, { value: '深圳', label: '深圳', }, { value: '东莞', label: '东莞', }, { value: '湛江', label: '湛江', }, { value: '云浮', label: '云浮', }, { value: '其他', label: '其他', }] }, { value: '上海', label: '上海', children: [{ value: '黄浦区', label: '黄浦区', }, { value: '卢湾区', label: '卢湾区', }, { value: '长宁区', label: '长宁区', }, { value: '其他', label: '其他', }] }, { value: '北京', label: '北京', children: [{ value: '东城区', label: '东城区' }, { value: '西城区', label: '西城区' }, { value: '朝阳区', label: '朝阳区' }, { value: '其他', label: '其他' }] }], //数据库 db: null, // 全部任务清单 List: [], // 添加任务清单 addList: { id: '2018324142', name: 'Mike', password: '123456', sex: '', address: '', birth: '', hobby: '', introduction: '', }, }; }, created() { this.indexedDB(); // this.readList() }, methods: { getTime(date) { this.ruleForm.date1 = date; console.log(this.ruleForm.date1); //这个数据就可以直接拿过去传给后台用 }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // alert('submit!'); this.addUser(); this.$router.push('/login'); } else { return false; console.log('error submit!!'); } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, handleChange(value) { console.log(value); }, cancel() { this.$router.push('/login'); }, // 初始化indexedDB indexedDB() { // 打开数据库，两个参数（数据库名字，版本号），如果数据库不存在则创建一个新的库 var request = window.indexedDB.open('Final_Works', '1') // 数据库操作过程中出错，则错误回调被触发 request.onerror = (event) => { console.log(event) } this.request = request // 创建一个新的数据库或者修改数据库版本号时触发 request.onupgradeneeded = (event) => { var db = event.target.result // 创建对象仓库用来存储数据，把id作为keyPath，keyPath必须保证不重复，相当于数据库的主键 var objectStore = db.createObjectStore('UserList', { keyPath: 'id' }) } // 数据库操作一切正常，所有操作后触发 this.request.onsuccess = (event) => { this.db = event.target.result this.readList() } }, //读取数据 readList() { var transaction = this.db.transaction('UserList').objectStore('UserList') var request = transaction.getAll() request.onerror = (event) => { this.$message.error('事务失败') } request.onsuccess = (event) => { this.List = request.result console.log("request.result"); console.log(request.result); } }, //添加数据 addUser() { this.readList(); if(this.List!=''){ this.addList.id = (parseInt(this.List[this.List.length - 1].id) + 1).toString(); }else{ this.addList.id="2018324141"; } console.log("新的ID"); console.log(this.addList.id); this.addList.name = this.ruleForm.name; this.addList.password = this.ruleForm.checkPass; this.addList.address = this.ruleForm.region; this.addList.birth = this.ruleForm.date1; this.addList.sex = this.ruleForm.resource; this.addList.hobby = this.ruleForm.type; console.log(this.ruleForm.type); this.addList.introduction = this.ruleForm.desc; if (this.addList.name !== '') { var request = this.db.transaction('UserList', 'readwrite') .objectStore('UserList') .add(this.addList) request.onsuccess = (event) => { this.$message.success('用户注册成功!') this.readList() this.addList = { id: '', name: '', sex: '', address: '', birth: '', hobby: '', introduction: '', } } request.onerror = (event) => { this.$message.error('用户注册失败') } } else { this.$message.error('内容不能为空哦') } }, } } * { box-sizing: border-box; margin: 0px; padding: 0px; } html, body { width: 100%; height: 100%; } #Register { width: 600px; margin: 50px auto; padding: 20px; background-color: #ffd7c7; } .demo-ruleForm { font-size: 20px; text-align: left; } .el-form-item { font-size: 20px; margin: 15px; } .el-form-item__label { font-size: 20px !important; } .el-button { width: 50px; height: 25px; } .last_footer { text-align: center; padding-right: 40px; }个人中心主要代码: 欢迎{{ $route.params.name }} 商城首页 购物车 收藏夹 个人中心 退出登录 基本信息 用户昵称:;{{ruleForm.name}} 用户ID:;{{ruleForm.id}} 性别:;{{ruleForm.resource}} 所在地区:;{{ruleForm.region.toString()}} 出生日期:;{{ruleForm.date1}} 兴趣爱好:;{{(ruleForm.type).toString()}} 个人简介:;{{ruleForm.desc}} 编辑 将文件拖到此处，或点击上传 只能上传jpg/png文件，且不超过500kb 取 消 确 定 提交 重置 取消 export default { data() { return { dialogVisible: false, editFlag: false, ruleForm: { id:'2018324141', //用户ID name: 'Amy', //用户昵称 region: '广东 / 湛江', //用户地址 date1: '2000-07-12', //用户生日 type: ["看书","游泳"], //用户爱好 resource: '女', //用户性别 desc: '咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩', //用户简介 }, activeIndex: '1', rules: { name: [{ required: true, message: '请输入昵称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], region: [{ required: true, message: '请选择地区', trigger: 'change' }], date1: [{ // type: 'string', required: true, message: '请选择出生日期', trigger: 'change' }], type: [{ type: 'array', required: true, message: '请至少选择一项爱好', trigger: 'change' }], resource: [{ required: true, message: '请选择性别', trigger: 'change' }], desc: [{ required: true, message: '请填写个人简介', trigger: 'blur' }], }, value: [], options: [{ value: '广东', label: '广东', children: [{ value: '广州', label: '广州', }, { value: '深圳', label: '深圳', }, { value: '东莞', label: '东莞', }, { value: '湛江', label: '湛江', }, { value: '云浮', label: '云浮', }, { value: '其他', label: '其他', }] }, { value: '上海', label: '上海', children: [{ value: '黄浦区', label: '黄浦区', }, { value: '卢湾区', label: '卢湾区', }, { value: '长宁区', label: '长宁区', }, { value: '其他', label: '其他', }] }, { value: '北京', label: '北京', children: [{ value: '东城区', label: '东城区' }, { value: '西城区', label: '西城区' }, { value: '朝阳区', label: '朝阳区' }, { value: '其他', label: '其他' }] }], //数据库 db: null, // 全部任务清单 List: [], // 添加任务清单 addList: { id: '2018324141', name: 'Amy', password:'123456', sex: '', address:'', birth:'', hobby:'', introduction:'', }, }; }, created() { this.indexedDB(); // this.readList() }, methods: { getTime(date) { this.ruleForm.date1 = date; console.log(this.ruleForm.date1); //这个数据就可以直接拿过去传给后台用 }, changePage(path) { var pathNow = this.$route.path; var pathSplit = pathNow.split("/"); var nameNow = pathSplit[pathSplit.length - 1]; if (path == "Index") { console.log(pathSplit); console.log(nameNow); console.log('/Index/' + nameNow); this.$router.push('/Index/' + nameNow); } else if (path == "ShopCart") { console.log('/ShopCart/' + nameNow) this.$router.push('/ShopCart/' + nameNow); } else if (path == "Favorites") { console.log('/Favorites/' + nameNow) this.$router.push('/Favorites/' + nameNow); } else if (path == "PerCenter"){ console.log('/PerCenter/' + nameNow) this.$router.push('/PerCenter/' + nameNow); }else if (path == "exit"){ console.log('/PerCenter/' + nameNow) this.$router.push('/login'); } }, //头像遮罩层点击事件 //点击上传头像 hover_click() { this.dialogVisible = true; }, //关闭对话框 handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => {}); }, //修改个人信息 EditInfo() { this.editFlag = true; console.log(this.$route.params.name); }, // 初始化indexedDB indexedDB() { // 打开数据库，两个参数（数据库名字，版本号），如果数据库不存在则创建一个新的库 var request = window.indexedDB.open('Final_Works', '1') // 数据库操作过程中出错，则错误回调被触发 request.onerror = (event) => { console.log(event) } this.request = request // 创建一个新的数据库或者修改数据库版本号时触发 request.onupgradeneeded = (event) => { var db = event.target.result // 创建对象仓库用来存储数据，把id作为keyPath，keyPath必须保证不重复，相当于数据库的主键 var objectStore = db.createObjectStore('UserList', { keyPath: 'id' }) } // 数据库操作一切正常，所有操作后触发 this.request.onsuccess = (event) => { this.db = event.target.result this.readList() } }, //读取数据 readList() { var transaction = this.db.transaction('UserList').objectStore('UserList') var request = transaction.getAll() request.onerror = (event) => { this.$message.error('事务失败') } request.onsuccess = (event) => { this.List = request.result var tempList=this.List; for(var item in tempList) { console.log(tempList[item]); var username=this.$route.params.name; if(tempList[item].name==username){ this.ruleForm.name=tempList[item].name; this.ruleForm.id=tempList[item].id; this.ruleForm.resource=tempList[item].sex; this.ruleForm.region=tempList[item].address; this.ruleForm.date1=tempList[item].birth; this.ruleForm.type=tempList[item].hobby; this.ruleForm.desc=tempList[item].introduction; this.ruleForm.checkPass=tempList[item].password; // console.log(loginFlag); }else{ // console.log(loginFlag); } } console.log("request.result"); console.log(request.result); } }, //更新用户信息 updateUserInfor() { this.addList.id=this.ruleForm.id; this.addList.name = this.ruleForm.name; this.addList.password = this.ruleForm.checkPass; this.addList.address = this.ruleForm.region; this.addList.birth = this.ruleForm.date1; this.addList.sex = this.ruleForm.resource; this.addList.hobby = this.ruleForm.type; console.log(this.ruleForm.type); this.addList.introduction = this.ruleForm.desc; if (this.addList.name !== '') { var request = this.db.transaction('UserList', 'readwrite') .objectStore('UserList') .put(this.addList) request.onsuccess = (event) => { this.$message.success('数据更新成功') this.updateDialogFormVisible = false this.readList() this.addList = { id: '', name: '', sex: '', address: '', birth: '', hobby: '', introduction: '', } } request.onerror = (event) => { this.$message.error('数据更新失败') } } else { this.$message.error('内容不能为空哦') } }, //提交需要修改的数据 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // alert('submit!'); this.editFlag=false; this.updateUserInfor(); // this.$message.success("更新成功!"); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, handleChange(value) { console.log(value); }, } } * { box-sizing: border-box; margin: 0; padding: 0; } #PerCenter { position: absolute; display: flex; top: 0; left: 0; width: 100%; height: 100%; /* background-color: #FF0000; */ background-image: url(../../public/imgs/2.jpg); background-repeat: no-repeat; background-size: 100% 100%; } .el-header { background-color: #cccccc; color: #333; text-align: center; height: 5%; line-height: 25px; } .el-main { background-color: rgba(255, 255, 255, 0.5); color: #000000; text-align: center; height: 100%; width: 100%; } .el-container { width: 100%; height: 100%; padding: 0; margin: 0; } .el-header>ul { position: absolute; right: 5px; } .el-header>ul>li { float: left; list-style: none; margin: 5px; user-select: none; } .el-header>ul>li:not(:first-child):hover { color: red; text-decoration: underline; } .el-avatar { position: absolute; left: -30px; top: 2px; width: 33px; height: 30px; color: #42B983; /* border: 1px solid #0000FF; */ } .el-avatar--icon { font-size: 35px; } .el-main>div { /* display: flex; */ width: 60%; height: 100%; min-width: 800px; margin: 0 auto; background-color: rgba(255, 255, 255, .6); } .el-main>div>div:nth-child(1) { display: block; position: relative; width: 150px; height: 150px; margin: 0 auto; border: 1px solid #FF0000; border-radius: 50%; background-color: #ffff00; } .el-main>div>div:nth-child(1)>img { position: relative; width: 100%; height: 100%; border-radius: 50%; } .el-main>div>div:nth-child(1)>div { display: none; position: absolute; width: 149px; height: 149px; left: 0px; top: 0px; border-radius: 50%; background-color: rgba(0, 0, 0, .5); } .el-main>div>div:nth-child(1)>div>img { position: relative; width: 50%; height: 50%; left: 25%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .el-main>div>div:nth-child(1):hover #active_hover { display: block; } .el-main>div>div:nth-child(2) { width: 100%; height: 100%; /* border: 2px solid #0000FF; */ } .baseInfo>div:nth-child(1) { height: 35px; border-bottom: 2px solid #bababa; } .baseInfo>div:nth-child(2) { text-align: left; padding: 10px 300px; } .baseInfo>div:nth-child(2)>ul { /* background-color: #0000FF; */ } .baseInfo>div:nth-child(2)>ul>li { text-align: left; line-height: 50px; list-style: none; } .edit { /* position: absolute; */ width: 50px; height: 20px; /* margin: 0px 120px; */ font-size: 20px; } .demo-ruleForm{ text-align: left; } .el-form-item{ margin: 15px 5px; } .last_footer{ padding-left: 50px; }GitHub源码地址:https://github.com/HXM-L/Web_Project.git gitee源码地址:https://gitee.com/HXM-L/Web_Project.git 2021-06-29 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |