testcase

package-lock.json

@@ -12,6 +12,7 @@
  "axios": "^0.27.2",
  "core-js": "^3.8.3",
  "echarts": "^5.3.3",
+ "pinia": "^2.0.18",
  "vue": "^3.2.13",
  "vue-echarts": "^6.2.3",
  "vue-router": "^4.1.3"
@@ -8073,6 +8074,50 @@
  "node": ">=8.6"
  }
  },
+ "node_modules/pinia": {
+ "version": "2.0.18",
+ "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.0.18.tgz",
+ "integrity": "sha512-I5MW05UVX6a5Djka136oH3VzYFiZUgeOApBwFjMx6pL91eHtGVlE3adjNUKLgtwGnrxiBRuJ8+4R3LKJKwnyZg==",
+ "dependencies": {
+ "@vue/devtools-api": "^6.2.1",
+ "vue-demi": "*"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.4.0",
+ "typescript": ">=4.4.4",
+ "vue": "^2.6.14 || ^3.2.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ },
+ "typescript": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/pinia/node_modules/vue-demi": {
+ "version": "0.13.7",
+ "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.7.tgz",
+ "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==",
+ "hasInstallScript": true,
+ "bin": {
+ "vue-demi-fix": "bin/vue-demi-fix.js",
+ "vue-demi-switch": "bin/vue-demi-switch.js"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.0.0-rc.1",
+ "vue": "^3.0.0-0 || ^2.6.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ }
+ }
+ },
  "node_modules/pkg-dir": {
  "version": "4.2.0",
  "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -17477,6 +17522,23 @@
  "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
  "dev": true
  },
+ "pinia": {
+ "version": "2.0.18",
+ "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.0.18.tgz",
+ "integrity": "sha512-I5MW05UVX6a5Djka136oH3VzYFiZUgeOApBwFjMx6pL91eHtGVlE3adjNUKLgtwGnrxiBRuJ8+4R3LKJKwnyZg==",
+ "requires": {
+ "@vue/devtools-api": "^6.2.1",
+ "vue-demi": "*"
+ },
+ "dependencies": {
+ "vue-demi": {
+ "version": "0.13.7",
+ "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.7.tgz",
+ "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==",
+ "requires": {}
+ }
+ }
+ },
  "pkg-dir": {
  "version": "4.2.0",
  "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",

package.json

@@ -12,6 +12,7 @@
  "axios": "^0.27.2",
  "core-js": "^3.8.3",
  "echarts": "^5.3.3",
+ "pinia": "^2.0.18",
  "vue": "^3.2.13",
  "vue-echarts": "^6.2.3",
  "vue-router": "^4.1.3"

src/components/Layout.vue

@@ -22,7 +22,7 @@
  <a-layout-header style="background: #fff; padding: 0" class="headers">
  <a-dropdown style="margin-right: 20px" class="down">
  <a class="ant-dropdown-link" @click.prevent>
- 强彦文
+  {{username}}
  <DownOutlined />
  </a>`
  <template #overlay>
@@ -30,6 +30,9 @@
  <a-menu-item>
  <a href="javascript:" @click="login">注销</a>
  </a-menu-item>
+ <a-menu-item>
+ <a href="javascript:" @click="Check">修改用户名</a>
+ </a-menu-item>
  </a-menu>
  </template>
  </a-dropdown>
@@ -61,6 +64,9 @@ import {
 } from '@ant-design/icons-vue';
 import {useRouter,useRoute} from "vue-router";
 import { defineComponent, ref,watch } from 'vue';
+import {useStore} from "@/store";
+import {storeToRefs} from "pinia";
+
 export default defineComponent({
  name: "layout",
  components: {
@@ -75,26 +81,27 @@ export default defineComponent({
  setup() {
  const collapsed = ref(false)
  const selectedKeys = ref(['1'])
+ const {username} = storeToRefs(useStore())
  let container = {
  padding: '24px', background: '#fff', minHeight: '100%'}
  const router = useRouter()
  const route = useRoute()
  const goTopage=(item)=>{
  router.push('/'+item.key).catch((err)=>err)
- console.log(route.meta.title)
  }
  const login =()=>{
  //清除cookie
  router.push("/login")
  }
-
  return {
  collapsed,
  selectedKeys,
  container,
  goTopage,
  route,
- login
+ login,
+ username,
+ Check
  };
  },
 });

src/main.js

@@ -7,7 +7,10 @@ import './assets/css/style.css'
 import Echarts from "vue-echarts";
 import "echarts"
 const app = createApp(App)
+import {createPinia} from "pinia";
+const pina = createPinia()
 app.component("Echarts",Echarts)
 app.use(Antd)
+app.use(pina)
 app.use(router)
 app.mount('#app')

src/store/index.js

@@ -0,0 +1,17 @@
+import {defineStore} from "pinia";
+const useStore = defineStore("mon",{
+ state(){
+ return {
+ username: "乔文章"
+ }
+ },
+ actions:{
+ Update(username){
+ this.username = username
+ }
+ }
+})
+
+export {
+ useStore
+}

src/view/Login.vue

@@ -1,15 +1,142 @@
 <template>
-<div>
+<div class="container">
- 我是登录页面
+ <div class="loginBox">
+ <a-form class="loginForm" :model="formdata"
+ :rules="rules" ref="formRef" >
+ <a-form-item
+ name="username"
+ >
+ <a-input placeholder="请输入用户名" v-model:value="formdata.username">
+ <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
+ </a-input>
+ </a-form-item>
+ <a-form-item name="password" >
+ <a-input-password placeholder="请输入密码" v-model:value="formdata.password" v-on:keyup.enter="">
+ <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
+ </a-input-password>
+ </a-form-item>
+ <a-form-item class="loginBtn">
+ <a-button type="primary" style="margin: 10px" @click="">登录</a-button>
+ <a-button type="info" style="margin: 10px" @click.prevent="close">取消</a-button>
+ </a-form-item>
+ </a-form>
+ </div>
+
+
 </div>
 </template>
 
 <script>
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
+import { useRouter } from 'vue-router'
+import {reactive,toRaw,ref} from 'vue'
+import { message } from 'ant-design-vue';
+import {useStore} from "@/store";
+
+
 export default {
- name: "Login.vue"
+ name: "login",
+ components:{
+ UserOutlined,
+ LockOutlined,
+ },
+ setup(){
+ const formdata=reactive({
+ username: "",
+ password: "",
+ })
+ //用户名和密码验证校验
+ const formRef = ref();
+
+ const router = useRouter()
+
+ const rules = {
+ username:{
+ required: true,
+ min:2,
+ max:12,
+ message: "用户名在3-12个字符之间"
+ },
+ password:{
+ required: true, message: '请输入密码',trigger:'blur'
+ }
+ }
+ const close = () => {
+ formRef.value.resetFields();
+ };
+ const mon = useStore()
+ const Check =(username)=>{
+ mon.Update(username)
+ }
+
+
+ // const logins = () => {
+ //      formRef.value.validate().then(()=>{
+ //        Login(formdata).then((rep)=>{
+ //          if (rep.data.code !==200){
+ //            message.error(rep.data.msg)
+ //          }else{
+ //            message.success(rep.data.msg)
+ //            console.log(rep.data)
+ //            window.sessionStorage.setItem('token',rep.data.data.token)
+ //            router.push('/admin/index')
+ //          }
+ //        })
+ //      }).catch((err)=>{
+ //        message.error("输入非法数据,请重新输入!",err)
+ //      })
+ // }
+
+
+
+
+
+
+
+
+
+
+
+ return {
+ formdata,
+ close,
+ rules,
+ formRef,
+ }
+ },
+
 }
-</script>
+</script >
 
 <style scoped>
+.container{
+ height: 100%;
+ background-color: #282C34;
+ background-image: url("../assets/css/images/background.jpeg");
+
+}
+.loginBox{
+ width: 450px;
+ height: 300px;
+ background-color: rgb(50, 109, 146);
+ position: absolute;
+ top: 50%;
+ left: 80%;
+ transform: translate(-50%,-50%);
+ border-radius: 9px;
+
+}
+.loginForm{
+ width: 100%;
+ position: absolute;
+ bottom: 10%;
+ padding: 0 20px;
+ box-sizing: border-box;
+}
+.loginBtn{
+ display: flex;
+ justify-content: flex-end;
+}
+
 
 </style>