一、控制器操作
在Dal层里 登录
GourmetDbContext db = new GourmetDbContext(); // 用户注册 public int Register(User user) { //保存 db.Users.Add(user); return db.SaveChanges(); } // 登录 public User Login(string uname,string upass) { return db.Users.FirstOrDefault(u => u.UserName == uname && u.PassWord == upass); }
在控制器中
UserDal userDal = new UserDal(); // 用户注册 [HttpPost,Route("api/reguser")] public IHttpActionResult Register(User user) { user.PassWord = Md5Helper.UserMd5(user.PassWord); return Json(userDal.Register(user)); } // 登录 [HttpPost,Route("api/login")] public IHttpActionResult Login(string uname, string upass) { upass = Md5Helper.UserMd5(upass); var item = userDal.Login(uname, upass); if (item!=null) { return Json(new { code = 1, data = item, msg = "" }); } else { return Json(new { code = 0, data = "", msg = "" }); } } [HttpPost,Route("api/upload")] public IHttpActionResult UpLoad() { //一、方法 //var httpFile = HttpContext.Current.Request.Files[0]; //var pathService = HttpContext.Current.Server.MapPath("/Images/"); //httpFile.SaveAs(pathService + httpFile.FileName); //return Json(new { url = httpFile.FileName }); //二、方法 //http 协议 Request Response //获取文件 var hpf = HttpContext.Current.Request.Files[0]; //新名称 var newFileName = Guid.NewGuid().ToString(); //获取扩展名 var ext = Path.GetExtension(hpf.FileName); //将文件名和扩展名拼接 var newName = newFileName + ext; //找到路径 将虚拟路径转成物理路径 var path = HttpContext.Current.Server.MapPath("/Images"); //合并路径和文件名 var newPath = Path.Combine(path, newName); //保存 hpf.SaveAs(newPath); return Json(new { url= newName }); }
二、VS Code操作
1、登录
<template> <div class="page"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名" prop="UserName"> <el-input v-model="ruleForm.UserName"></el-input> </el-form-item> <el-form-item label="密码" prop="PassWord"> <el-input v-model="ruleForm.PassWord"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> <el-link type="primary" href="/#/register">注册</el-link> </el-form-item> </el-form> </div> </template> <script type="text/ecmascript-6"> export default { data() { return { ruleForm: { UserName: '', PassWord: '' }, rules: { UserName: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], PassWord: [ { required: true, message: '请输入密码', trigger: 'blur' } ] }, } }, components: {}, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { //验证成功 //判断用户名和密码 this.$axios.post('http://localhost:54080/api/login?uname='+this.ruleForm.UserName+'&upass='+this.ruleForm.PassWord+'' ).then(res=>{ if(res.data.code>0){ this.$message.success('登录成功'); this.$router.push('/register') }else{ this.$message.error('登录失败,用户名或密码错误'); } }) //alert('submit!'); } else { //验证失败 console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script> <style scoped lang="stylus"></style
2、登录与上传图片
<template> <div class="page"> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名" prop="UserName"> <el-input type="UserName" v-model="ruleForm.UserName" autocomplete="off"></el-input> </el-form-item> <el-form-item label="密码" prop="PassWord"> <el-input type="PassWord" v-model="ruleForm.PassWord" 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="头像"> <el-upload class="avatar-uploader" action="http://localhost:54080/api/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </div> </template> <script type="text/ecmascript-6"> 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.PassWord) { callback(new Error('两次输入密码不一致!')) } else { callback() } } return { ruleForm: { UserName: '', PassWord: '', checkPass: '', HeadIocUrl: '', }, rules: { UserName: [{ validator: validatePass, trigger: 'blur' }], checkPass: [{ validator: validatePass2, trigger: 'blur' }], }, imageUrl: '', } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { //验证通过之后 this.$axios .post('http://localhost:54080/api/reguser', this.ruleForm) .then((res) => { if (res.data > 0) { this.$router.push('/login') } else { this.$message.error('注册失败') } }) } else { console.log('error submit!!') return false } }) }, resetForm(formName) { this.$refs[formName].resetFields() }, handleAvatarSuccess(res, file) { this.ruleForm.HeadIocUrl = res.url this.imageUrl = URL.createObjectURL(file.raw) }, beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!') } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!') } return isJPG && isLt2M }, }, } </script> <style> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } </style>