一、登錄
1.DAL層
例子:
/// <summary>
/// 登錄
/// </summary>
/// <param name="uname"></param>
/// <param name="upass"></param>
/// <returns></returns>
public User Login(string uname,string upass)
{
return db.Users.FirstOrDefault(u => u.UserName == uname && u.PassWord == upass);
}
2.控制器
/// <summary>
/// 登錄
/// </summary>
/// <param name="uname"></param>
/// <param name="upass"></param>
/// <returns></returns>
[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 = "" });
}
}
3.VUE
<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>
二、注冊和圖片上傳
1.DAL層
/// <summary>
/// 用戶注冊
/// </summary>
/// <param name="user"></param>
/// <returns></returns>
public int Register(User user)
{
//保存
db.Users.Add(user);
return db.SaveChanges();
}
2.控制器
/// <summary>
/// 用戶注冊
/// </summary>
/// <param name="user"></param>
/// <returns></returns>
[HttpPost,Route("api/reguser")]
public IHttpActionResult Register(User user)
{
user.PassWord = Md5Helper.UserMd5(user.PassWord);
return Json(userDal.Register(user));
}
//圖片上傳
[HttpPost,Route("api/upload")]
public IHttpActionResult UpLoad()
{
//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 });
}
3.VUE
<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>