标签：Code return ruleForm VS var new PassWord 上传 formName
VS Code 的图片上传与登录
一、控制器操作
在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>
标签：Code,return,ruleForm,VS,var,new,PassWord,上传,formName 来源： https://www.cnblogs.com/li660/p/15248942.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。