AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

时不我待(第十八课)项目环境搭建

2023-07-16 68
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 时不我待(第十八课)项目环境搭建

后台管理的项目搭建过程（第一课）

 



 

第一部分 认识项目的搭配环境开发




第二部分  项目的创建需要的环境依赖如下

Element - The world's most popular Vue UI framework   ElementUl组件库

Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网      Sass预处理器

Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网]    Less预处理器

CSS Tools: Reset CSS  Css样式重置

Font Awesome，一套绝佳的图标字体库和CSS框架     图标库的使用

npm i -S axios  axiox 网络请求的知识    Vue(第十七课)AXIOS对JSON数据的增删改查_星辰镜的博客-CSDN博客

npm i vue-router -S 路由的安装   Vue3框架中路由的使用和局部刷新的功能(第十一课)_星辰镜的博客-CSDN博客_vue3 路由局部刷新

json-server 的安装   Vue(第十六课)JSON-SERVE和POSTMAN技术中对数据的增删改查_星辰镜的博客-CSDN博客

Vue框架学习(第十三课)Vuex状态管理中的store和state属性_星辰镜的博客-CSDN博客_vue store  状态管理 vuex

本案例的安装不在示范 之前有说到

App.vue

<template>
  <div>首页</div>
  <!-- 路由出口 -->
  <router-view/>
</template>
<style lang="scss">
</style>

Main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用elementui组件库
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
// 引用elementui组件库
// .use(ElementPlus)
createApp(App).use(store).use(router).mount('#app')

index.ts

data.json

{
    "students": [
      {
        "name": "我修改的数据",
        "age": "27",
        "id": 1003
      },
      {
        "id": 1004,
        "name": "王者荣耀",
        "sex": "男",
        "height": "190",
        "weight": "67",
        "job": "Web开发工程师"
      },
      {
        "name": "硝酸",
        "sex": "男",
        "height": "178",
        "weight": "58",
        "job": "前端开发工程师",
        "id": 1005
      },
      {
        "name": "小黄入",
        "sex": "男",
        "height": "198",
        "weight": "78",
        "job": "王者",
        "id": 1006
      },
      {
        "name": "小黄",
        "sex": "男",
        "height": "198",
        "weight": "78",
        "job": "王者",
        "id": 1007
      },
      {
        "name": "小黄",
        "sex": "男",
        "height": "198",
        "weight": "78",
        "job": "王者",
        "id": 1008
      },
      {
        "name": "小黄",
        "sex": "男",
        "height": "198",
        "weight": "78",
        "job": "王者",
        "id": 1011
      },
      {
        "id": 1012
      },
      {
        "name": "小黄",
        "sex": "男",
        "height": "198",
        "weight": "78",
        "job": "王者",
        "id": 1013
      },
      {
        "name": "我是增加的数据在studens中",
        "sex": "男",
        "height": "200",
        "weight": "18",
        "job": "吃鸡",
        "id": 1014
      },
      {
        "name": "AAA",
        "sex": "男",
        "height": "198",
        "weight": "78",
        "job": "王者",
        "id": 1015
      }
    ],
    "teachers": [
      {
        "id": 102,
        "name": "王米",
        "sex": "女",
        "subject": "前端开发工程师"
      },
      {
        "id": 104
      },
      {
        "name": "我是数据",
        "sex": "男",
        "subject": "墙隔断",
        "id": 105
      },
      {
        "name": "小明",
        "sex:男": "",
        "subject:随口": "",
        "id": 106
      },
      {
        "name": "我叫立尚三",
        "sex:男": "",
        "subject:王者荣耀": "",
        "id": 107
      },
      {
        "name": "我叫李珊四",
        "sex:男": "",
        "subject:王者荣耀": "",
        "id": 108
      }
    ],
    "profile": {
      "name": "typicode"
    }
  }

store/index.ts

import { createStore } from 'vuex'
export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="Password" prop="pass">
      <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
    </el-form-item>
    <el-form-item label="Confirm" prop="checkPass">
      <el-input
        v-model="ruleForm.checkPass"
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item label="Age" prop="age">
      <el-input v-model.number="ruleForm.age" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >Submit</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}
const ruleForm = reactive({
  pass: '',
  checkPass: '',
  age: '',
})
const rules = reactive({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  age: [{ validator: checkAge, trigger: 'blur' }],
})
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

main.css

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html, body {
  width: 100%;
  height: 100%;
  font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
}

serviceAxios.js

import axios from 'axios'
// 创建拦截器
const service=axios.create()
// 请求拦截和响应拦截
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  export default service

登录注册的样式

<style lang="scss">
.login-con {
  align-content: center;
  margin: auto;
  display: flex;
}
.menu-tab {
  li {
    display: line-break;
    justify-content: center;
    width: 100px;
    height: 55px;
    font-size: 30px;
    line-height: 55px;
    font-size: 14px;
    text-align: center;
    color: rgb(255, 0, 21);
    border-radius: 12px;
    cursor: pointer;
  }
}
.current {
  width: 200px;
  font-size: 16px;
  font-weight: 600;
  color: rgb(0, 255, 72);
  cursor: pointer;
  margin: 20px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  // transition: all 0.4s ease-in-out;
  background-image: linear-gradient(
    to right,
    #25aae1,
    #4481eb,
    #04befe,
    #3f86ed
  );
  box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}
.demo-ruleForm {
  width: 30%;
  margin: 50px auto;
  label {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    color: rgb(13, 195, 255);
  }
}
.block {
  display: block;
  width: 100%;
  border-radius: 12px;
}
.login-btn {
  margin-top: 20px;
}
h1 {
  font-weight: 900;
  text-align: center;
}
.big {
  width: 100%;
  height: 100px;
  color: black;
}
.big .son {
  margin: auto;
  width: 60%;
  height: 100px;
  color: rgb(9, 1, 1);
}
</style>

<template>
  <div class="big">
    <div class="big son">
      <div class="login">
        <div class="login-con">
          <ul class="menu-tab">
            <li
              v-for="v in MenuData"
              :class="{ current: v.current }"
              :key="v.type"
              @click="clickMenu(v)"
            >
              {{ v.txt }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

 <!-- 表单部分 -->
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    class="demo-ruleForm"
  >
    <h1 v-show="model === 'register'">注册页面</h1>
    <h1 v-show="model === 'login'">登录页面</h1>
    <el-form-item prop="Name" v-show="model === 'register'">
      <label>用户名</label>
      <el-input v-model="ruleForm.Name" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item prop="Phone" v-show="model === 'register'">
      <label>手机号</label>
      <el-input v-model="ruleForm.Phone" type="text" autocomplete="off" />
    </el-form-item>
    <!--  -->
    <el-form-item prop="username">
      <label>邮箱</label>
      <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item prop="password">
      <label>密码</label>
      <el-input
        v-model="ruleForm.password"
        type="password"
        autocomplete="off"
      />
    </el-form-item>
    <el-form-item prop="passwords" v-show="model === 'register'">
      <label>重复密码</label>
      <el-input v-model.number="ruleForm.passwords" />
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        class="login-btn block"
        @click="submitForm(ruleFormRef)"
        >{{ model === "login" ? "登录按钮" : "注册按钮" }}</el-button
      >
      <el-button @click="resetForm(ruleFormRef)" class="login-btn block"
        >按钮重置</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
// 创建复杂数据的类型
import { reactive, ref, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import * as ck from "../../util/verfifcation.js";
import link from "../../api/Link.js";
import apiUrl from "../../api/url.js";
const ruleFormRef = ref<FormInstance>();
onMounted(() => {
  console.log(process.env.VUE_APP_API);
});
const MenuData = reactive([
  { txt: "登录", current: false, type: "login" },
  { txt: "注册", current: false, type: "register" },
]);
let model = ref("login");
let clickMenu = (item: any) => {
  MenuData.forEach((elemt) => {
    elemt.current = false;
  });
  item.current = true;
  // 修改状态
  model.value = item.type;
};
//表单模块
// 用户名正则验证
const checkuserName = (rule: any, value: any, callback: any) => {
  let reg = /^[\w-]{4,16}$/;
  if (!value) {
    return callback(new Error("用户名不能为空！"));
  } else if (!reg.test(value)) {
    return callback(new Error("用户你好你输入的用户名格式步正确"));
  } else {
    callback();
  }
};
//手机号验证
const checkuserPhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("手机号的不能为空！"));
  } else if (ck.ckPhone(value)) {
    return callback(new Error("用户你好你输入的手机号格式步正确"));
  } else {
    callback();
  }
};
//邮箱
const checkuser = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("邮箱的不能为空！"));
  } else if (ck.CkEmail(value)) {
    return callback(new Error("用户你好你输入的邮箱格式步正确"));
  } else {
    callback();
  }
};
// 密码的正则表达式
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else if (ck.CkPass(value)) {
    callback(new Error("用户输入的密码格式有误请重新输入"));
  } else {
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  // 因为登录的时候没有密码的核对  所以在登录的时候曲线重复的代码核对
  if (model.value === "login") {
    callback();
  }
  if (value === "") {
    callback(new Error("用户重复的密码不能为空"));
  } else if (value !== ruleForm.password) {
    callback(new Error("俩次输入密码必须相同"));
  } else {
    callback();
  }
};
const ruleForm = reactive({
  Name: "",
  Phone: "",
  username: "",
  password: "",
  passwords: "",
  pass: "",
  checkPass: "",
  age: "",
});
// 设置以那种方式发生函数
const rules = reactive({
  password: [{ validator: validatePass, trigger: "blur" }],
  passwords: [{ validator: validatePass2, trigger: "blur" }],
  username: [{ validator: checkuser, trigger: "blur" }],
  Name: [{ validator: checkuserName, trigger: "blur" }],
  Phone: [{ validator: checkuserPhone, trigger: "blur" }],
});
// 注册
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");
      link(apiUrl).then((ok: any) => {
        console.log(ok);
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style lang="scss">
@import "./src/styles/reset.scss";
</style>

 

文章标签：
JavaScript
前端开发
数据格式
JSON
t75yjb52rsccc
目录
相关文章
做梦都在改BUG
|
5月前
|
程序员 Python
GitHub爆赞！最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍，但需要注意的是，正因为它既好学又好用，所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程，从简单的打印一直讲到完整项目的实现。
做梦都在改BUG
46 4
刘俊涛liu
|
11月前
|
存储 缓存 Apache
小白带你学习linuxAPACHE安装和管理 （二十）
小白带你学习linuxAPACHE安装和管理 （二十）
刘俊涛liu
71 0
陌上少年，且听这风吟
|
机器学习/深度学习 弹性计算 开发工具
【MindStudio训练营第一期]--【新手班】学习笔记①
【MindStudio训练营第一期]--【新手班】学习笔记①
陌上少年，且听这风吟
162 0
陌上少年，且听这风吟
|
机器学习/深度学习 人工智能 弹性计算
【MindStudio训练营第一期】--【新手班】学习笔记②
【MindStudio训练营第一期】--【新手班】学习笔记②
陌上少年，且听这风吟
197 0
Meteor.792
|
应用服务中间件 Android开发 开发者
JavaWeb上机实验4 Web开发环境搭建
JavaWeb上机实验4 Web开发环境搭建
Meteor.792
171 0
Cisyam
|
前端开发 JavaScript 程序员
重学JavaWeb第三天（十一）
重学JavaWeb第三天（十一）
Cisyam
81 0
聪小陈
|
JSON 小程序 JavaScript
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
聪小陈
179 0
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
牛哄哄的柯南8151
|
Linux 数据安全/隐私保护 虚拟化
学妹跑过来问我安装Linux虚拟机的详细步骤【手把手教学，顺带教教学妹配置网络】
学妹跑过来问我安装Linux虚拟机的详细步骤【手把手教学，顺带教教学妹配置网络】
牛哄哄的柯南8151
959 0
学妹跑过来问我安装Linux虚拟机的详细步骤【手把手教学，顺带教教学妹配置网络】
托马斯-酷涛
|
分布式计算 资源调度 Hadoop
二十三、HadoopHA环境搭建（保姆篇，手把手搭建）
二十三、HadoopHA环境搭建（保姆篇，手把手搭建）
托马斯-酷涛
281 0
二十三、HadoopHA环境搭建（保姆篇，手把手搭建）
灰小猿
|
XML 前端开发 程序员
【Android开发】小白入门必看的”四框“使用教程，你学废了嘛？
【Android开发】小白入门必看的”四框“使用教程，你学废了嘛？
灰小猿
200 0
【Android开发】小白入门必看的”四框“使用教程，你学废了嘛？

热门文章

最新文章

  • 1
    常见浏览器User-Agent大全
  • 2
    未来已来！阿里小蜜AI技术揭秘
  • 3
    Flink: 实时规则引擎助力新零售发展
  • 4
    Apache Flink 进阶（三）：Checkpoint 原理解析与应用实践
  • 5
    weex-html5 组件进阶
  • 6
    群智能算法：灰狼优化算法（GWO）的详细解读
  • 7
    Amazon 的IoT之路
  • 8
    hp M1530一体机无法在OEM系统下安装驱动
  • 9
    NumPy Cookbook 带注释源码 十、Scikit 中的乐趣
  • 10
    潮流设计：15个创意的 3D 字体版式作品欣赏
  • 1
    springboot配置hosts文件
    24
  • 2
    maven项目的pom.xml文件常用标签使用介绍
    23
  • 3
    天气预报-腾讯天气-7天-地址查询版免费API接口
    24
  • 4
    第四届人文，智慧教育与服务管理国际学术会议（HWESM 2025） 2025 4th International Conference on Humanities, Wisdom Education and Service Management
    20
  • 5
    2025电气自动化与电机系统国际学术会议（EAMS 2025） 2025 International Conference on Electrical Automation and Motor System
    19
  • 6
    大厂面试高频：什么是自旋锁？Java 实现自旋锁的原理？
    18
  • 7
    C++ 之 perf+火焰图分析与调试
    16
  • 8
    面试高频：Synchronized 原理，建议收藏备用 ！
    13
  • 9
    SQL 中，通配符
    14
  • 10
    鸿蒙next版开发：相机开发-适配不同折叠状态的摄像头变更(ArkTS)
    20

    • 相关课程

    更多
  • Servlet完全自学手册图文教程
  • Go语言完全自学手册图文教程
  • Lua完全自学手册图文教程
  • Python完全自学手册图文教程
  • 「大师课」搞定 Java 开发基础
  • 物联网开发 - Linux驱动开发实操演练

    • 相关电子书

    更多
  • 小程序云应用入门实操系列课程 - 第四讲
  • 小程序云应用入门实操系列课程 - 第一讲
  • 冬季实战营第二期：Linux操作系统实战入门

    • 相关实验场景

    更多
  • Linux指令入门-系统管理
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 重温童年的“五子棋”，赢取专属阿里云Serverless证书
  • Arthas 进阶教程
  • 实验手册指导文档
  • Linux指令入门-文件管理
    • 下一篇
    无影云桌面