企业开发后台

npm i vuex-persistedstate@4.0.0-beta.3 

import createPersistedState from 'vuex-persistedstate'


  // 配置持久化插件
  plugins: [
    // 默认存储在localStorage
    createPersistedState({
      // 本地存储名字
      key: 'XXXXxxxxxxxxxxxx',
      // 指定需要存储的模块-----命名空间
      paths: ['user', 'cart']
    })
  ]
})

 vue.config.js里面引入 css样式 （清除浏览器固定样式）

{
  path: '/',
//重定向
  redirect : "login"
}

gitHub 使用

 GitHub开发流程

git status

git add .

git commit -m ""

git pull

git push

 请求接口时 在响应拦截器中做出反馈

/**
 * 请求接口后，返回数据进行拦截（响应拦截器）
 */
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    let data = response.data
    // 业务需求-------data.resCode !== 0 报错，并且返回Promise 数据
    if(data.resCode !== 0) {
        Message.error(data.message);
        return Promise.reject(data);
    }else{
        return response;
        // return Promise.resolve(data);
    }

}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

 登录验证

 <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
  >


    <el-form-item label="Password" prop="pass">
        <el-input v-model="ruleForm.pass" type="text"  />
    </el-form-item>


</el-form>


<script  setup>
import { reactive, ref } from 'vue'

//prop ruleFrom rules里面的都一样
const ruleForm = reactive({
  pass: '',
})

const validatePass = (rule: any, value: any, callback: any) => {
let reg = /^([a-aA-Z]|[0-9](\W||-)+@[a-zA-z0-9];
value = ruleForm .pass
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else if (!reg.test(value)){
     callback(new Error('请输入正确格式'))
}else{

    callback()
  }
}

const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
})




</script>

重复密码 

 <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
  >


    <el-form-item label="密码" prop="passWord">
        <el-input v-model="ruleForm.passWord" type="text"  />
    </el-form-item>
 
    <el-form-item label="确认密码" prop="passWords">
        <el-input v-model="ruleForm.passWords" type="text"  />
    </el-form-item>

</el-form>


<script  setup>
import { reactive, ref } from 'vue'

//prop ruleFrom rules里面的都一样
const ruleForm = reactive({
  passWord: '',
  passWords:" "
})

const validatePass = (rule: any, value: any, callback: any) => {
value = ruleForm .passWord;
let reg = /^([a-aA-Z]|[0-9](\W||-)+@[a-zA-z0-9]
  if (value === '') {
    callback(new Error('请输入用密码'))
  } else if (!reg.test(value)){
     callback(new Error('请输入正确格式'))
}else{

    callback()
  }
}

const Pass = (rule: any, value: any, callback: any) => {
let reg = /^([a-aA-Z]|[0-9](\W||-)+@[a-zA-z0-9];
value = ruleForm .passWords
  if (value === '') {
    callback(new Error('请重复输入密码'))
  } else if (value != ruleForm .passWord){
     callback(new Error('重复密码不正确'))
}else{
    callback()
  }
}


const rules = reactive({
  passWord: [{ validator: validatePass, trigger: 'blur' }],
  passWords: [{ validator: Pass, trigger: 'blur' }],
})




</script>

切换效果 

      <ul class="menu-tab">
        <li
          v-for="item in denglu"
          :key="item.id"
          @click="btn(item)"
          :class="{ current: item.current }"
        >
          {{ item.txt }}
        </li>
      </ul>


<el-form-item prop="checkPass2"   v-if="model==='register'">
          <label for="">确认密码</label>
          <el-input v-model="ruleForm.checkPass2" type="password" />
</el-form-item>


<script setup>
import { reactive, ref } from "vue";

const denglu = reactive([
  {
    txt: "登录",
    current: true,
    type: "login ",
  },
  {
    txt: "注册",
    current: false,
    type: "register",
  },
]);


const model = ref('login')
//高光
const btn = (item) => {
//点击循环一次 都变成false 
  denglu.forEach((i) => {
    i.current = false;
  });
//高光
  item.current = true;
  model.value = item.type
};


</script>

跨域--------当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

在vite.config.js 里面编辑

  devServer: {
    open: false, // 编译完成是否打开网页
    host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
    port: 8080, // 访问端口
    https: false, // 编译失败时刷新页面
    hot: true, // 开启热加载
    hotOnly: false,
    proxy: {
      "/devApi": {
          target: "http://www.web-jshtml.cn/productapi", //API服务器的地址
          changeOrigin: true,
          pathRewrite: {
//查找到/devApi 把它替换成空
// http://192.168.0.106:8080/devApi/  == http://www.web-jshtml.cn/productapi
              "^/devApi": ''
          }
      }
    }
  },

配置的路径 

//开发环境 后面加上 http://192.168.0.106:8080/devApi/
const BASEURL = process.env.NODE_ENV === 'production' ? '' : '/devApi';


const service = axios.create({
    baseURL: BASEURL,  // http://192.168.0.106:8080/devApi/  == http://www.web-jshtml.cn/productapi/productapi
    timeout: 15000,   // 超时
    // 网络请求接口，假设 5000
    // 1000 2000，
});

 响应拦截器 response

/**
 * 请求接口后，有数据返回之后做的事情（响应拦截器）
 */
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    let data = response.data
    // 业务需求
    if(data.resCode !== 0) {
        Message.error(data.message);
        return Promise.reject(data);
    }else{
        return response;
        // return Promise.resolve(data);
    }

}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

  export function validateEmail(value){
    let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; 
    return !reg.test(value) ? true : false;
}


      const ruleForm = reactive({
        username: '410293095@qq.com',
        password: 'wo123456789',
        passwords: '',
        code: ''
      });



    const getSms = (() => {
        // 进行提示  报错就不用触发接口
        if(ruleForm.username == '' ) {
          root.$message.error('邮箱不能为空！！');
          return false;
        }
        if(validateEmail(ruleForm.username)) {
          root.$message.error('邮箱格式有误，请重新输入！！');
          return false;
        }
        // 获取验证码
        let requestData = {
          username: ruleForm.username, 
          module: model.value
        }
        // 修改获取验证按钮状态
        updataButtonStatus({
          status: true,
          text: '发送中'
        })
        // 延时多长时间
        GetSms(requestData).then(response => {
          let data = response.data;
          root.$message({
            message: data.message,
            type: 'success',
            dangerouslyUseHTMLString: true
          });
          // 启用登录或注册按钮
          loginButtonStatus.value = false;
          // 调定时器，倒计时
          countDown(60);
        }).catch(error => {
          // 启用登录或注册按钮
          loginButtonStatus.value = false;
          updataButtonStatus({
            status: false,
            text: '再次获取'
          })
          console.log(error);
        })
      })

路由白手套 

export function removeToKen(toKen){
    return cookie.remove(adminToKen);
};
export function removeUserName(){
    return cookie.remove(usernameKey);
}

const whiteRouter = ["/login"]; // indexOf方法，判断数组中是否存在指定的某个对象，如果不存在，则返回-1

router.beforeEach((to, from, next) => {
  if (getToKen()) {
    if (to.path === "/login") {
      removeToKen();
      removeUserName();
      store.commit("app/SET_TOKEN", "");
      store.commit("app/SET_USERNAME", "");
      next();
    }  else {
    if (whiteRouter.indexOf(to.path) !== -1) {
      // 存在
      next(); // to
    } else {
      next("/login"); // 路由指向
    }
    /**
     * 1、直接进入index的时候，参数to被改变成了 "/index"，触发路由指向，就会跑beforeEach
     * 2、再一次 next 指向了login，再次发生路由指向，再跑beforeEach，参数的to被改变成了"/login"
     * 3、白名单判断存在，则直接执行next()，因为没有参数，所以不会再次beforeEach。
     */
  }
});

选中 CTRL+d

密码加密 

npm install js-sha1

import sha1 from 'js-sha1';

      const login = (() => {
        let repuestData = {
          username: ruleForm.username,
          password: sha1(ruleForm.password),
          code: ruleForm.code
        }

----------------- -------------------------------------路由传参方式--------------------------------------------------------

{
path:"xxxxx :id/:title"
}

router.push ({path:`/xxxxxx${id}/${title}`})

let route = useRouter()

let id = route.params.id

封装公共样式

调用

展示 

 h4 {
    @include webkit(transition, all 0.5s ease 0s);
    &:hover {
      background-color: #f3f3f3;
      .button-group {
        display: block;
      }
    }
  }
}
.button-group {
  display: none;
  position: absolute;
  z-index: 2;
  right: 11px;
  top: -1px;
  button {
    font-size: 12px;
  }
}

------------------------------------操作数组--------------------------------------

findindex 找到符合元素的索引位置

1.当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。后面的666和66大于50，但是它只找到99，就不会执行后面的循环了。
2.如果没有符合条件的元素返回 -1

//找到符合元素的索引位置
let index = category.item.findIndex( item => item.id == deleteId.value);


let index = category.item.findIndex( item => {
          return  item.id == deleteId.value
});

        操作数组

           * 两个参数的时候是删除，三个参数是替换\插入

           * splice(指定起始位置, 数据的数量, 新数据)

           * splice(1, 2, {})

           * [

           * {id: "132", category_name: "sdf df "},

           * {}

           * ]


 let index = category.item.findIndex(
        item => item.id == deleteId.value

  );

          // // 删除数组指定元素

    category.item.splice(index, 1);

 filter 过滤不符合元素

filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。

let newData = category.item.filter(
//过滤不符合的元素，然后返回剩下的未被过滤掉的元素
            (item) => item.id != deleteId.value
          );
          category.item = newData;

map 会依次处理数组中的每一个元素  并返回一个新的数组 对原来的数组不会影响

var arr=[1,2,3];
var newArr=arr.map(function(value,index,arr){
        return value+1;
 })
console.log(arr)   [1,2,3]
console.log(newArr)   [2,3,4]

配置跨域  vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
 
// 8月更新-自动导入ElementPlus组件，除了图标需要单独引用外，其他的都可以直接在页面上使用组件，会自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  plugins: [vue()],
  base: "./", // 类似publicPath，'./'避免打包访问后空白页面，要加上，不然线上也访问不了
  // 8月更新
  productionSourceMap: !isProduction, //关闭生产环境下的SourceMap映射文件
 
  // 8月更新-自动导入ElementPlus
  // 需安装 npm install -D unplugin-vue-components unplugin-auto-import
  plugins: [
      vue(),
      AutoImport({
          resolvers: [ElementPlusResolver()],
      }),
      Components({
          resolvers: [ElementPlusResolver()],
      }),
  ],
  resolve: {
    alias: {
      // 如果报错__dirname找不到，需要安装node,执行npm install @types/node --save-dev
      "@": path.resolve(__dirname, "src"),
      "@assets": path.resolve(__dirname, "src/assets"),
      "@components": path.resolve(__dirname, "src/components"),
      "@images": path.resolve(__dirname, "src/assets/images"),
      "@views": path.resolve(__dirname, "src/views"),
      "@store": path.resolve(__dirname, "src/store"),
    },
  },
  // 8月更新，全局引入less
  css: {
        sourceMap: !isProduction, // css sourceMap 配置
        preprocessorOptions: {
            less: {
                modifyVars: {
                    hack: `true; @import (reference) "${path.resolve("src/assets/css/base.less")}";`,
                },
                javascriptEnabled: true,
            },
        },
    },
  build: {
    outDir: "dist",
    // 9月更新
    assetsDir: "assets", //指定静态资源存放路径
    sourcemap: false, //是否构建source map 文件
    terserOptions: {
      // 生产环境移除console
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
  server: {
    https: false, // 是否开启 https
    open: false, // 是否自动在浏览器打开
    cors: true, // 允许跨域  8月更新
    port: 3000, // 端口号
    host: "0.0.0.0",
    proxy: {
      "/api": {
        target: "", // 后台接口
        changeOrigin: true,
        secure: false, // 如果是https接口，需要配置这个参数
        // ws: true, //websocket支持
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  // 引入第三方的配置
  optimizeDeps: {
    include: [],
  },
});

组件触发仓库里面的 actions

 

仓库 new Promise 接口

 

数组去重

JSON.stringify()和JSON.parse()的区别以及作用

localStorage/sessionStorage默认只能存储字符串，所以我们利用JSON.stringify()将对象转为字符串放在缓存里面，之后把缓存区出来的时候再用JSON.parse()转回对象就可以了。

//存
function setLocalStorage(key,val){
    window.localStorage.setItem(key,JSON.stringify(val));
};
//取
function getLocalStorage(key){
    let val = JSON.parse(window.localStorage.getItem(key));
    return val;
};
//测试
setLocalStorage('demo',[1,2,3]);
let  a = getLocalStorage('demo');//[1,2,3]