kxq/zoo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化数据获取方式

Browse Source
This commit is contained in:
bicey 2024-05-19 22:37:23 +08:00
parent 53af23e703
commit d91a550769
6 changed files with 110 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/ZooAnimal.vue
View File

@ -3,13 +3,13 @@ import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
import {mapActions,mapState} from "vuex";
export default {
name: "ZooAnimal",
components: {ZooAnimalFormDialog, ZooUserFormDialog},
data() {
return {
animals: [],
tableData: [],
searchInput: {
state: '',//状态（0正常 1异常）
@ -38,18 +38,7 @@ export default {
return Delete
},
//endregion
// dataFilters() {
// // 计算格式化后的数组
// let data = copy(this.tableData)
// data.forEach(e => {
// if (e.state === 0) {
// e.state = '正常'
// } else if (e.state === 1) {
// e.state = '异常'
// }
// })
// return data
// },
...mapState(["animals"])
},
watch: {
searchInput: {
@ -60,6 +49,7 @@ export default {
}
},
methods: {
...mapActions(["getAnimals"]),
showEditDialog(animal) {
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
this.dialog.editData = this.animals.find(e => e.id === animal.id)
@ -177,23 +167,7 @@ export default {
},
},
mounted() {
//数据生成器
for (let i = 0; i < 100; i++) {
let animal = {
id: i,
name: 'animal' + (i + 3),
sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性',
species: Math.floor(Math.random() * 10).toString(),//种类
weight: Number((Math.random() * 2000).toFixed(2)),
height: Number((Math.random() * 10).toFixed(2)),
state: Math.floor(Math.random() * 2),//状态（0正常 1异常）
roleId: Math.floor(Math.random() * 100),//饲养员id
color: '',//Math.floor(Math.random() * 255),//颜色
features: Math.floor(Math.random() * 40).toString(),//特征
habit: Math.floor(Math.random() * 500).toString()//生活习性
}
this.animals.push(animal)
}
this.getAnimals()
this.tableData = copy(this.animals);//复制一份给表格展示
}
}

38
src/pages/ZooLogin.vue
View File

@ -1,19 +1,23 @@
<script>
import {mapMutations} from "vuex";
import {mapMutations,mapState,mapActions} from "vuex";
export default {
name: "ZooContainer",
data() {
return {
user: {
username:'',
password:'123456',
username: '',
password: '123456',
}
}
},
computed: {
...mapState(['loginUser'])
},
methods: {
...mapMutations(['updateUserName']),
...mapActions(['getLoginUser']),
...mapMutations(['updateLoginUser']),
onSubmit() {
console.log('点击了登录按钮')
if (!this.user.username || !this.user.password) {
@ -22,32 +26,22 @@ export default {
message: '用户名和密码不能为空',
type: 'warning',
})
} else {
//此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
//密码错误
if (false) {
return ElMessage({
message: '用户名不存在或密码错误',
type: 'error',
})
}
//登录成功
sessionStorage.setItem('isLogin', 'isLogin');//登录状态
localStorage.setItem('userName', this.user.username);//本地存储登录用户名
this.updateUserName(this.user.username);//存储登录用户名
}
this.getLoginUser(this.user)//通过表单获取登录的用户
//能获取到登录后的数据，说明登录成功
if (this.loginUser) {
localStorage.setItem('username', this.loginUser.username);//本地存储登录用户名
this.$router.push('/panel/home')
}
},
reset() {
this.user = {}
},
},
computed: {
},
mounted() {
this.updateUserName('');//清空退出登录的用户名
this.user.username = localStorage.getItem('userName');//自动填充历史登录的用户
this.updateLoginUser('');//清空退出登录的用户
this.user.username = localStorage.getItem('username');//自动填充历史登录的用户
}
}

19
src/pages/ZooUser.vue
View File

@ -1,7 +1,8 @@
<script>
import {Delete, Edit, Search, User} from "@element-plus/icons-vue";
import {mapState,mapActions} from "vuex";
import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
import {copy, fuzzyMatching, generateUsers, splitKeyWords} from "@/utils/common.js";
export default {
@ -25,6 +26,7 @@ export default {
// endregion
...mapState(["users"])
},
watch: {
searchInput: {
@ -36,7 +38,6 @@ export default {
},
data() {
return {
users: [],//原始用户数据
tableData: [],//用来显示在界面的数据
searchInput: {
auth: '',
@ -50,6 +51,7 @@ export default {
}
},
methods: {
...mapActions(['getUsers']),
showEditDialog(user) {
// console.log('点击了编辑',user)
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
@ -169,6 +171,7 @@ export default {
this.tableData = searchResult
},
//鼠标悬浮显示密码
//region
showPassword(event,password){
console.log('showPassword')
event.target.innerText = password
@ -176,18 +179,10 @@ export default {
hidePassword(event) {
event.target.innerText = '••••••••'
}
//endregion
},
mounted() {
//数据生成器
for (let i = 0; i < 100; i++) {
let user = {
userKey: i,
username: 'user' + (i + 3),
password: '123456',
auth: Math.floor(Math.random() * 3),
}
this.users.push(user)
}
this.getUsers()//获取用户数据
this.tableData = copy(this.users);//复制一份给表格展示
}
}

5
src/router/index.js
View File

@ -6,6 +6,7 @@ import ZooPanel from "@/pages/ZooPanel.vue";
import ZooHome from '../pages/ZooHome.vue'
import ZooUser from "@/pages/ZooUser.vue";
import ZooAnimal from "@/pages/ZooAnimal.vue";
import store from "@/store/index.js";
const router = createRouter({
history: createWebHashHistory(),
@ -52,7 +53,7 @@ const router = createRouter({
router.beforeEach((to, from, next) => {
//判断页面是否需要登录权限才可进入
if (to.meta.isAuth) {
if (!sessionStorage.getItem('isLogin')) {
if (!store.state.loginUser.username) {
router.replace({
path: '/login',
})
@ -64,4 +65,6 @@ router.beforeEach((to, from, next) => {
}
})
export default router

48
src/store/index.js
View File

@ -1,21 +1,57 @@
import {createStore} from "vuex";
import {generateAnimals, generateUsers} from "@/utils/common.js";
const actions = {
//更新登录用户
getLoginUser(context, user) {
//此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
//密码错误
if (false) {
return ElMessage({
message: '用户名不存在或密码错误',
type: 'error',
})
}
//登录成功
context.commit('updateLoginUser', user);//存储登录用户,这里拉取远程登录的用户作为参数
},
//获取用户数据
getUsers(context) {
context.commit('updateUsers', generateUsers())
},
//获取动物数据
getAnimals(context) {
context.commit('updateAnimals', generateAnimals())
}
}
const mutations = {
//更新已登录用户名
updateUserName(state, value) {
state.user.username = value
//更新已登录的用户
updateLoginUser(state, value) {
state.loginUser = value
},
//更新用户集合
updateUsers(state, value) {
state.users = value
},
//更新动物集合
updateAnimals(state, value) {
state.animals = value
}
}
const state = {
//登录用户数据
user: {
loginUser: {
username: 'user1',
}
auth: null
},
//用户数据
users: [],
//动物数据
animals: [],
}
export default createStore({

37
src/utils/common.js
View File

@ -1,3 +1,40 @@
export function generateUsers() {
const users = []
//数据生成器
for (let i = 0; i < 100; i++) {
let user = {
userKey: i,
username: 'user' + (i + 3),
password: '123456',
auth: Math.floor(Math.random() * 3),
}
users.push(user)
}
return users
}
export function generateAnimals() {
const animals = []
//数据生成器
for (let i = 0; i < 100; i++) {
let animal = {
id: i,
name: 'animal' + (i + 3),
sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性',
species: Math.floor(Math.random() * 10).toString(),//种类
weight: Number((Math.random() * 2000).toFixed(2)),
height: Number((Math.random() * 10).toFixed(2)),
state: Math.floor(Math.random() * 2),//状态（0正常 1异常）
roleId: Math.floor(Math.random() * 100),//饲养员id
color: '',//Math.floor(Math.random() * 255),//颜色
features: Math.floor(Math.random() * 40).toString(),//特征
habit: Math.floor(Math.random() * 500).toString()//生活习性
}
animals.push(animal)
}
return animals
}
//深拷贝任何值
export function copy(value) {
let result = JSON.stringify(value)