vue+element-ui实现的简单线上购物商城
环境配置本项目使用hbuilderX的脚手架vue cli,创建,使用了vue,vue-router,element-ui这三个框架,数据库存储用到了浏览器自带的IndexedDB,安装vue-router的命令:参考:https://router.vuejs.org/zh/installation.htmlnpm install vue-router安装element-ui的命令:参考:http
·
环境配置
本项目使用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
主要界面效果
主要代码:
登录页面主要代码:
<template>
<div id="login">
<div>
<div>
<h1>欢迎登陆</h1>
<div>
<img src="../../public/imgs/1.jpg">
<form>
<ul>
<li>账号:<input type="text" name="" id="" v-model="infor.username" value="" placeholder="请输入账号"
required="required" @keyup.enter="loginSubmit()"/></li>
<li>密码:<input type="password" name="" v-model="infor.pwd" id="pwd" placeholder="请输入密码"
required="required" @keyup.enter="loginSubmit()"/>
<img src="../assets/eye.png" id="pwd_img" class="pwd_img" style="display: none;"
@click="changType">
<img src="../assets/neye.png" id="pwd_img" class="pwd_img" @click="changType">
</li>
</ul>
<p>
<el-link type="primary" @click="register()">注册</el-link>
<el-link type="primary" @click="forgetPWD()">忘记密码</el-link>
</p>
<input type="button" @click="loginSubmit()" value="登陆" />
<input type="reset" value="重置" />
</form>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
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("请联系管理员修改密码!")
}
},
}
</script>
<style scoped>
* {
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;
}
</style>
注册页面主要代码:
<template>
<div id="Register">
<h2>欢迎新用户注册</h2>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户昵称:" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别:" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="所在地区:" prop="region">
<el-cascader v-model="ruleForm.region" :options="options" :props="{ expandTrigger: 'hover' }"
@change="handleChange"></el-cascader>
</el-form-item>
<el-form-item label="出生日期:" required>
<el-col :span="13">
<el-form-item prop="date1">
<el-date-picker type="date" value-format="yyyy-MM-dd" @change="getTime" placeholder="选择日期"
v-model="ruleForm.date1" style="width: 100%;">
</el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="兴趣爱好:" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="看书" name="type"></el-checkbox>
<el-checkbox label="游泳" name="type"></el-checkbox>
<el-checkbox label="打羽毛球" name="type"></el-checkbox>
<el-checkbox label="打篮球" name="type"></el-checkbox>
<el-checkbox label="其他" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="个人简介" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item class="last_footer">
<el-button type="primary" @click="submitForm('ruleForm')" class="edit">提交</el-button>
<el-button @click="resetForm('ruleForm')" class="edit">重置</el-button>
<el-button type="primary" @click="cancel()" class="edit">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
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('内容不能为空哦')
}
},
}
}
</script>
<style scoped="scoped">
* {
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;
}
</style>
个人中心主要代码:
<template>
<div id="PerCenter">
<el-container>
<el-header style="height: 35px;">
<ul>
<li>
<div class="userImg">
<el-avatar icon="el-icon-s-custom"></el-avatar>
<!-- 把用户名传递过来 -->
欢迎{{ $route.params.name }}
</div>
</li>
<li @click='changePage("Index")'>商城首页</li>
<li @click='changePage("ShopCart")'>购物车</li>
<li @click='changePage("Favorites")'>收藏夹</li>
<li @click='changePage("PerCenter")'>个人中心</li>
<li @click='changePage("exit")'>退出登录</li>
</ul>
</el-header>
<el-main>
<div>
<div>
<img src="../../public/imgs/1.jpg">
<div id="active_hover" @click="hover_click">
<img src="../../public/imgs/camera.png">
</div>
</div>
<div class="baseInfo">
<div>
<h3>基本信息</h3>
</div>
<div>
<ul>
<li>
<P>用户昵称: <span>{{ruleForm.name}}</span></P>
</li>
<li>
<P>用户ID: <span>{{ruleForm.id}}</span></P>
</li>
<li>
<P>性别: <span>{{ruleForm.resource}}</span></P>
</li>
<li>
<P>所在地区: <span>{{ruleForm.region.toString()}}</span></P>
</li>
<li>
<P>出生日期: <span>{{ruleForm.date1}}</span></P>
</li>
<li>
<P>兴趣爱好: <span>{{(ruleForm.type).toString()}}</span></P>
</li>
<li>
<P>个人简介: <span>{{ruleForm.desc}}</span></P>
</li>
<li>
<p>
<el-button type="primary" class="edit" @click="EditInfo">编辑</el-button>
</p>
</li>
</ul>
</div>
</div>
</div>
</el-main>
</el-container>
<el-dialog title="请上传图片" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="个人信息编辑区域" :visible.sync="editFlag" width="30%" :before-close="handleClose">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户昵称:" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="性别:" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="所在地区:" prop="region">
<el-cascader v-model="ruleForm.region" :options="options" :props="{ expandTrigger: 'hover' }"
@change="handleChange"></el-cascader>
</el-form-item>
<el-form-item label="出生日期:" required>
<el-col :span="13">
<el-date-picker type="date" value-format="yyyy-MM-dd" @change="getTime" placeholder="选择日期"
v-model="ruleForm.date1" style="width: 100%;">
</el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="兴趣爱好:" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="看书" name="type"></el-checkbox>
<el-checkbox label="游泳" name="type"></el-checkbox>
<el-checkbox label="打羽毛球" name="type"></el-checkbox>
<el-checkbox label="打篮球" name="type"></el-checkbox>
<el-checkbox label="其他" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="个人简介" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item class="last_footer">
<el-button type="primary" @click="submitForm('ruleForm')" class="edit">提交</el-button>
<el-button @click="resetForm('ruleForm')" class="edit">重置</el-button>
<el-button type="primary" @click="editFlag=false" class="edit">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
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);
},
}
}
</script>
<style scoped>
* {
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;
}
</style>
GitHub源码地址:https://github.com/HXM-L/Web_Project.git
gitee源码地址:https://gitee.com/HXM-L/Web_Project.git
- 2021-06-29
前往低代码交流专区
更多推荐
27
0- 0
已为社区贡献1条内容
所有评论(0)