import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')
<script>
import locale from 'element-plus/es/locale/lang/zh-CN';
const data = Array.from(Array(110),(v,i) => {
return {
account: "uaa" + (i + 1),
createTime: new Date(Date.now() + Math.ceil(Math.random() * 1000)),
level: Math.ceil(Math.random() * 10)
}
})
export default {
name:"App",
data(){
return {
locale,
currentPage:1,
pageSize:5,
total:0,
tableDate:[]
};
},
created(){
this.getData(1,this.pageSize);
},
methods:{
handleSizeChange(val){
this.pageSize = val;
this.getData(this.currentPage,val);
},
handleCurrentChange(val){
this.currentPage = val;
this.getData(val,this.pageSize);
},
getData(page,pageSize){
this.tableData = data.slice((page - 1) * pageSize,page * pageSize);
this.total = data.length;
}
},
};
</script>
<template>
<el-config-provider :locale="locale">
<el-table :data="tableData" border style="width: 100%;">
<el-table-column prop="account" label="用户名"/>
<el-table-column prop="createTime" label="注册时间"/>
<el-table-column prop="level" label="等级"/>
</el-table>
<el-pagination
v-model:currentPage="currentPage"
:page-sizes="[5,10]"
:page-size="pageSize"
layout="total,sizes,prev,pager,next,jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</el-config-provider>
</template>
<style scoped>
body{
background-color: blueviolet;
}
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
6666
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(ElementPlus).mount('#app')
router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
const routes = [
{
path: "/",
name: "HomeView",
meta: {
requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
},
component: HomeView,
},
{
path: "/login",
name: "Login",
component: () => import("../views/sign/login.vue"),
},
{
path: "/register",
name: "Register",
component: () => import("../views/sign/register.vue"),
},
];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
});
router.beforeEach((to) => {
const token = localStorage.getItem("token");
// 如果访问非登录界面，且户会话信息不存在，代表未登录，则跳转到登录界面
if (to.meta.requireAuth && !token) {
return { name: 'Login' }
}
return true;
});
export default router;
App.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
html,
body,
div,
ul,
h1,
h2,
h3,
p {
padding: 0;
margin: 0;
}
.w100p {
width: 100%;
}
.txt-r {
text-align: right;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
</style>
views/sign/register.vue
<template>
<div class="page flex-center">
<div class="sign-box">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<h3 class="title">系统注册</h3>
<el-form-item label="账号" prop="account">
<el-input
v-model="form.account"
placeholder="请输入用户名"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="form.password"
type="password"
placeholder="请输入密码"
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="cfpassword">
<el-input
v-model="form.cfpassword"
type="password"
placeholder="请确认密码"
></el-input>
</el-form-item>
<el-form-item label="">
<el-button type="primary" class="w100p" @click="register"
>注册</el-button
>
</el-form-item>
<div class="txt-r">
<router-link to="/login">已有账号？去登录</router-link>
</div>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "register",
data() {
const validateCfpassword = (rule, value, callback) => {
if (value !== this.form.cfpassword) {
callback(new Error("两次密码输入不一致"));
} else {
callback();
}
};
return {
form: {
account: "",
password: "",
cfpassword: "",
},
rules: {
account: [
{ required: true, message: "请输入用户名", trigger: ["change", "blur"] },
{ pattern: /^[a-zA-Z][a-zA-Z0-9_-]{3,31}$/, message: '用户名由英文字母开头的长度3-32位字母、_和-组成', trigger: ["change", "blur"] },
],
password: {
required: true,
min: 6,
message: "请输入至少6个字符的密码",
trigger: ["change", "blur"],
},
cfpassword: [
{
required: true,
message: "请确认密码",
trigger: ["change", "blur"],
},
{
validator: validateCfpassword,
trigger: ["change", "blur"],
},
],
},
};
},
methods: {
register() {
this.$refs.form.validate((valid) => {
if (valid) {
// 模拟像后台请求数据
const post = (params) => {
// 模拟后台比对数据
return new Promise((resolve, reject) => {
const { account, password } = params
let db_user = localStorage.getItem("db_user");
if (db_user) {
db_user = JSON.parse(db_user);
} else {
db_user = []
}
if (!db_user.find((v) => v.account === account)) {
db_user.push({ account, password });
localStorage.setItem("db_user", JSON.stringify(db_user));
resolve ({ msg: '注册成功！'});
} else {
reject({msg: `用户名：${account}已存在！`});
}
})
};
post(this.form).then((res) => {
alert(`${res.msg}用户名：${this.form.account},密码： ${this.form.password}` );
this.$router.push("/");
}).catch(err => {
alert(err.msg);
})
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style lang="css">
@import url(./index.css);
</style>
views/sign/login.vue
<template>
<div class="page flex-center">
<div class="sign-box">
<el-form ref="form" :model="form" :rules="rules" label-width="60px">
<h3 class="title">系统登录</h3>
<el-form-item label="账号" prop="account">
<el-input
v-model="form.account"
placeholder="请输入用户名"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model="form.password"
type="password"
placeholder="请输入密码"
></el-input>
</el-form-item>
<el-form-item label="">
<el-button type="primary" class="w100p" @click="login"
>登录</el-button
>
</el-form-item>
<div class="txt-r">
<router-link to="/register">没有账号？去注册</router-link>
</div>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {
form: {
account: "",
password: "",
},
rules: {
account: [
{
required: true,
message: "请输入用户名",
trigger: ["change", "blur"],
},
{
pattern: /^[a-zA-Z][a-zA-Z0-9_-]{3,31}$/,
message: "用户名由英文字母开头的长度4-32位字母、_和-组成",
trigger: ["change", "blur"],
},
],
password: {
required: true,
min: 6,
message: "请输入至少6个字符的密码",
trigger: ["change", "blur"],
},
},
};
},
methods: {
login() {
this.$refs.form.validate((valid) => {
if (valid) {
// 模拟后台数据处理
const post = ((params) => {
// 模拟后台比对数据
return new Promise((resolve, reject) => {
let db_user = localStorage.getItem("db_user");
if (db_user) {
db_user = JSON.parse(db_user);
}
const { account, password } = params
if (db_user.find((v) => v.account === account && v.password === password)) {
resolve({msg: '登录成功！', token: Date.now()});
} else {
reject({msg: '用户名或密码错误！'})
}
})
});
post(this.form).then((res) => {
alert(`${res.msg}` );
localStorage.setItem("token", res.token);
this.$router.push("/");
}).catch(err => {
alert(err.msg);
})
} else {
console.log("error submit!!");
return false;
}
});
},
},
};
</script>
<style lang="css">
@import url(./index.css);
</style>
views/sign/index.css
.page {
height: 100vh;
}
a {
color: blue;
}
.sign-box {
width: 400px;
background: #fff;
padding: 30px 30px;
border-radius: 4px;
box-shadow: 0 0 25px #cac6c6;
}
.title {
font-size: 20px;
line-height: 30px;
margin-bottom: 10px;
color: #000;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
HomeView.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
