前端项目初始化

技术:nodejs+vue3+ElementPlus+axios

利用nodejs在服务器上部署js项目(利用vue框架),利用nodejs的npm抓取vue的依赖、ElementPlus、axios

利用vue ui指令生成初始化整合了vue3框架的js项目

在8080端口热部署前端项目，在8081端口部署后端项目

vue3整合ElementPlus

vue3只能整合ElementPlus不能整合elementUi，并且整合方式不同于vue2。但是我选择的组件的代码还是在elementUi中复制的。

vue3整合axios

发送axios请求:

vue框架下的前端项目梳理

路由(router)、main.js、App.vue、store等各司其职

main.js:

程序入口文件，初始化vue实例，并引入使用需要的插件和各种公共组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//elementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//axios:
import axios from 'axios'

var app=createApp(App);
app.use(store).use(router).use(ElementPlus)
app.config.globalProperties.$axios=axios
app.mount('#app')

/**
 * 以上好像是vue3集成ElementPlus与axios的唯一写法
 */

App.vue:

App.vue是项目的主组件，页面入口文件，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集。

<template>
<router-view/>
</template>

<style>

</style>

router文件夹里的index.js:

把准备好的路由组件注册到路由里

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Blogs from '../views/Blogs.vue'
import BlogEdit from '../views/BlogEdit.vue'
import BlogDetail from '../views/BlogDetail.vue'

const routes = [
{
  path: '/',
  name: 'index',
  redirect: {name: "Blogs"}
},
{
  path: '/blogs',
  name: 'Blogs',
  component: Blogs
},
{
  path: '/login',
  name: 'Login',
  component: Login
},
{
  path: '/blog/add',
  name: 'BlogAdd',
  component: BlogEdit
},
{
  path: '/blog/:blogId', //路径
  name: 'BlogDetail',
  component: BlogDetail    //相应页面(组件)
},
{
  path: '/blog/:blogId/edit',
  name: 'BlogEdit',
  component: BlogEdit
}

]

const router = createRouter({
history: createWebHashHistory(),
routes
})

export default router

store文件夹里的index.js:

存储共享数据，方便各个请求之间特定数据能够互相get与set

import { createStore } from 'vuex'

export default createStore({
state: {
  //想象成java对象的私有属性
  token: localStorage.getItem("token"),
  userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
},
getters: {
  //想象成java中的get()
  GET_USERINFO: state => {
    return state.userInfo
  }
},
mutations: {
  //set()
  SET_TOKEN: (state,token) => {
    state.token=token;
    localStorage.setItem("token",token);
  },
  SET_USERINFO: (state,userInfo) => {
    state.userInfo=userInfo;
    sessionStorage.setItem("userInfo",JSON.stringify(userInfo))
  },
  REMOVE: (state) => {
    state.token= '';
    state.userInfo= {};
    localStorage.setItem("token",'');
    sessionStorage.setItem("userInfo",JSON.stringify(''));
  }
}
,
actions: {
},
modules: {
}
})

views文件夹下存储各个页面组件

<template>
<div>
 <h2>login</h2>
 <br>
</div>

<el-container>
 <el-header>
   <img class="logo" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp08%2F38041823511047-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661182198&t=a4fb6417216fcd76741e642dea5a65a3">
 </el-header>
 <el-main>
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <el-form-item label="帐号" prop="username">
       <el-input v-model="ruleForm.username"></el-input>
     </el-form-item>
     <el-form-item label="密码" prop="password">
       <el-input type="password" v-model="ruleForm.password"></el-input>
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
       <el-button @click="resetForm('ruleForm')">重置</el-button>
     </el-form-item>
   </el-form>
 </el-main>
</el-container>
</template>

<style>
.el-header, .el-footer {
/*background-color: #B3C0D1;*/
color: #333;
text-align: center;
line-height: 60px;
}

.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}

.el-main {
/*background-color: #E9EEF3;*/
color: #333;
text-align: center;
line-height: 160px;
}

body > .el-container {
margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
line-height: 320px;
}

.logo{
height: 200%;
margin-top: -50px;
}

.demo-ruleForm{
max-width: fit-content;
margin: 0 auto;
}
</style>


<script>
export default {
name: "Login",
data() {
 return {
   ruleForm: {
     username: 'markerhub',
     password: '111111'
   },
   rules: {
     username: [
       { required: true, message: '请输入帐号', trigger: 'blur' },
       { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
     ],
     password: [
       { required: true, message: '请输入密码', trigger: 'change' }
     ]
   }
 };
},
methods: {
 submitForm(formName) {
   this.$refs[formName].validate((valid) => {
     if (valid) {
       this.$axios.post('http://localhost:8081/login',this.ruleForm).then(res => {
         // console.log("res.data: "+res.data);
         // console.log("res.header: "+res.headers)
         if(res.data.code==1){
           alert("登录成功!");
         }else{
           alert("登陆失败");
         }
         const jwt=res.headers['authorization'];
         const userInfo=res.data.data;
         //把数据共享给其他请求(数据存在客户端浏览器本地)
         this.$store.commit("SET_TOKEN",jwt);
         this.$store.commit("SET_USERINFO",userInfo);
         this.$router.push("/blogs");
       })

     } else {
       console.log('error submit!!');
       return false;
     }
   });
 },
 resetForm(formName) {
   this.$refs[formName].resetFields();
 }
}
}
</script>

第四天

前端项目初始化

vue3整合ElementPlus

vue3整合axios

vue框架下的前端项目梳理