基于Android平台开发，校园二手交易web端（二）

1. 基于Android平台开发，校园二手交易app端（一）：https://blog.csdn.net/jky_yihuangxing/article/details/140991022

1. 项目涉及到的技术点

1. 使用Element UI+Vue 实现框架搭建
2. 使用axios请求服务端数据
3. 使用router路由实现页面跳转

2. 项目运行环境

1. 开发工具：Visual Studio Code或HBuilderX
2. 运行环境：Nodejs16+
3. 开发语言：Vue

3. 部分代码实现过程

温馨提示：创建一个Vue应用，前提条件必须安装Node.js

1. 官网说明：https://cn.vuejs.org/guide/quick-start.html
   
2. LoginView.vue页面

<template>
	<div class="container">
		<div class="login-container">
			<div class="login-title">
				<h2>校园交易后台管理系统</h2>
			</div>

			<div class="login-form">
				<el-form :rules="rules" ref="ruleForm" :model="ruleForm" status-icon label-width="66px"
					class="demo-ruleForm">
					<el-form-item label="用户名" prop="username">
						<el-input placeholder="请输入用户名" v-model="ruleForm.username" type="username" />
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input placeholder="请输入密码" v-model="ruleForm.password" autocomplete="off" type="password" />
					</el-form-item>

					<el-form-item class="btn-login-container">
						<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		login
	} from "@/api/httpsend";

	export default {
		data() {
			return {
				ruleForm: {
					username: "admin",
					password: "123456",
				},
				rules: {
					username: {
						required: true,
						message: "请输入用户名",
						trigger: "blur",
					},
					password: {
						required: true,
						message: "请输入密码",
						trigger: "blur",
					},
				},

			};
		},

		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//登录
						this.userLogin(this.ruleForm.username, this.ruleForm.password);
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},

			resetForm(formName) {
				this.$refs[formName].resetFields();
			},

			//发请登录请求
			userLogin(username, password) {
				login(username, password).then((res) => {
					if (res.code == 200) {
						this.$message.success({
							message: res.msg,
							duration: 1000,
							onClose: () => {
								//路由跳转
								const url = localStorage.getItem("activeIndex") || "/user";
								//保存用户名
								localStorage.setItem("username", username);
								this.$router.push(url);
							},
						});
					} else {
						this.$message.error({
							message: res.msg
						})
					}
				});
			},
		},
	};
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		/*  position: absolute 可以让图片撑满整个屏幕 */
		position: absolute;
		justify-content: center;
		align-items: center;
		background: url("@/assets/img_login_1.jpg") no-repeat center center;
		background-size: 100% 100%;
	}

	.login-container {
		width: 400px;
		height: 364px;
		background: white;
		border-radius: 10px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.login-title {
		background-color: #3375b9;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	h2 {
		line-height: 100px;
		text-align: center;
		color: white;
	}

	.login-form {
		display: flex;
		width: 100%;
		height: 264px;
		justify-content: center;
		align-items: center;
	}
</style>

这里还涉及到与服务端数据交互的过程，代码无法贴全。涉及服务端的搭建

4. 运行效果图

5. 资料学习

1. 渐进式JavaScript 框架（Vue）：https://cn.vuejs.org/

2. Element Plus: https://s-test.belle.cn/zh-CN/component/button.html

温馨提示：需要对前端开发有一定的基础