最近想着一步步搭建一个前后端项目，将每一步详细的做出来。（如果有不足或者建议，也希望大佬们指出哦）

前端初始化

1.根据vue脚手架创建vue项目

这里可以用很多方法创建vue项目，大家看着创建吧，只要能创建出来就可以了（用的vue3）

这里我加了router和vuex，emm，就不用ts了（感觉还是js用的更好一点）

OK，项目创建完毕，即可开始写前端代码了。

2.安装依赖：

        1.挑一个自己喜欢的组件库引用一手，这里我选用arco design（也没必要只用Element-ui，可以试试其他的）

npm install --save-dev @arco-design/web-vue

OKOK，开始下载

安装好了之后，我们还要安装一些必要的依赖，比如axios，sass这些，emmmm，目前就安装这几个吧。

npm install axios

npm install sass -D

然后根据组件库官网的操作进行引入

import { createApp } from 'vue' import ArcoVue from '@arco-design/web-vue'; import App from './App.vue'; import '@arco-design/web-vue/dist/arco.css';  const app = createApp(App); app.use(ArcoVue); app.mount('#app');

改造一下main.js中的代码

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ArcoVue from '@arco-design/web-vue'; import '@arco-design/web-vue/dist/arco.css';   createApp(App).use(store).use(ArcoVue).use(router).mount('#app') 

注意注意：引入组件库之后，可以找个组件看看能不能使用该组件库，以防万一；

呐，这里我们就去官网看看

很好，就是你了，表单布局，我们点击其下方代码，将其放入App.vue试试能不能用

好嘞，随机找一串串代码放到App.vue中试试（不要试着从图片中照抄我的哈，自己去官网找一个试试Arco Design Vue）咱，主打一个快速。

嚯，出现了！那么组件库是能用哒！

好，第二步也就完成了。

这里我建议每做几步就开启调试一下。

3.调整目录，初始化项目：

        1.清空components（把HelloWorld.vue删了）

        2.新建目录api，utils，views

        3.把App.vue中用不到的代码都给删了，留一个  就好了，然后，把router的index.js的代码全给注释了（emmm，直接删了感觉太麻烦，注释了后面写起来好做参照）

目前的目录结构就是这样了；

（App.vue就变成这样啦）

4.定义请求工具：

大家不要一开始写前端就直奔优美的”可跳转“页面，这边先整体规定一个向后端发请求的工具request.js

        在utils目录下创建request.js文件：

import axios from 'axios';//导入axios //定义前缀 const URL = 'http://localhost:8080'; const instance = axios.create({URL})   //来一个响应拦截器 instance.interceptors.response.use(     result=>{         if(result.data.code == 0){             return result.data;         }         //如果不为0则表示失败         alert(result.data.message||'出现错误')         return Promise.reject(err);//异步的状态转化成失败的状态     },     err=>{         alert('服务异常');         return Promise.reject(err);//异步的状态转化成失败的状态     } ) export default instance;

解释一下这段代码：引入发请求的axios，然后定义一个开发时期的请求必有前缀（这里直接写http://localhost:8080其实是有问题的，对于后面出现的跨域问题....emmmm，其实前端后端都有方式解决，看情况吧，后面再讲），做一个相应拦截器，对结果进行判断，然后导出

（这里需要提示一下统一相应有哪些（不然可能会不太好理解））

后端那一块统一相应数据：code：0表示成功，1表示失败；msg： 提示信息；data：数据

前端代码编写开始！！

OK啊各位，初始化完成我们便要开始编写代码了。

首先，我们先明确一波步骤：

        确定布局  --> 填充各部分代码 -->  后端插入

(如果涉及与后端的交互，遵循以下步骤

        1.搭建页面（html，css）-> 2.绑定数据与事件 -> 3.调用后端接口)

好嘞，熟悉了吗各位，不熟练也没事，我们先找一个练练手。

先从组件库这里找到布局：

这布局，看似普通，实则帅的雅痞，就它了。引入代码

回到目录component下，创建一个新的文件GlobalPage.vue

(众所周知的小技巧：可快速构建vue文件)

然后我们改一下index.js文件（将GlobalPage引入）（要是看着那些注解感觉不美观的话就直接删了）

import { createRouter, createWebHashHistory } from 'vue-router' import MainPage from '../components/GlobalPage.vue'  const routes = [   // {   //   path: '/',   //   name: 'home',   //   component: HomeView   // },   // {   //   path: '/about',   //   name: 'about',   //   // route level code-splitting   //   // this generates a separate chunk (about.[hash].js) for this route   //   // which is lazy-loaded when the route is visited.   //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')   // }   {     path: '/',     name: 'mainPage',     component: MainPage   } ]  const router = createRouter({   history: createWebHashHistory(),   routes })  export default router 

运行一手看看（记得每次有一些大改就要看看情况，改多再看就会很麻烦，bug也不好排查）

运行出来就是这么个界面

搭建Header和Footer代码

先把头部和尾部的代码解决了。

先来尾部吧，我觉得这个比较简单（哈）

一般来说，网站的底部都是一些网站运营的介绍什么的（大多都是哈，也不一定全是）

这里我就以大家都爱的4399为例（大多都是哈，也不一定全是，哈哈哈）

emmm，这里我们可以把Footer这一块封装为一个组件，因为虽然定义的GlobalPage属于是全局的页面，但万一之后会跳转到其他的页面呢，这里我觉得封装成组件更好一些（看起来也更轻巧一些）

在views目录下创建GlobalFooter.vue

差不多了，将其替换掉GlobalPage的header

展示出了样式就行了，（之后可以美化以下），好，然后我们开始整Header，

这一块导航栏，我觉得吧，还是用组件比较合适（倒不是不会整，毕竟也麻烦，不用自己手敲的绝不自己手敲代码）

就选这个深色模式导航啦，新建GlobalHeader.vue文件把代码用CV大法放进去

其实这个空的区域可以加一个logo或者其他什么的

呐，就像这样

OK,目前的页面就是这个样子了；

搭建搜索页面

好的，下面整一个全局的搜索框页面吧

创建一个SearchPage.vue 文件

从组件库中找到一个合适的搜索框

将新组件放到GlobalPage中（暂时的，之后还是要处理路由的）

现在搜索框就出来了，（这里最右边加了一点点小细节（不重要）之后会把代码发出来）

这里其实可以加一个搜索框等待效果

这里其实是复制了两个搜索框代码，不过另外一个加上了loading属性，这样就能表现出等待中的效果

呐呐呐，就是这样，然后我们再用v-if定义一下它的显示和隐藏就可以了

ok，演示一下：

先设置script 为setup，然后引入ref

这里定义了一个函数，点击之后，isSearch改变，等到五秒之后，值恢复。来试试吧

成功了，那再来完善一下

有搜索框，当然要有显示搜索内容的区域，

再去组件库看看有没有什么合适的

就用这个吧，

添加代码并做一些优化

目前就是这个样子了。

emmm，感觉不太对，好像有点快了，要不还是做一个登录注册页面吧。。。

搭建登录注册页面

创建LoginPage.vue

这一块我觉得还挺容易的，先给个示例代码吧

这一块代码是之前找到的一个登录页代码，我觉着就还挺好

不过吧，我决定还是不用这个代码，去组件库上找找吧（主要还是要加深一下组件库的使用）

好了就用这个

小改一下吧；

emmm，这代码可谓一坨（发出来也需要些勇气啊。。）

大家如果有自己的写的规范代码就用自己的（hhh）

那么，我们开始前面的三部曲：搭建页面以及完成，可以开始绑定数据与事件了。

这里可以添加一个校验规则，

在组件库这里找一下表单的校验规则

随便定义了一个，大家可以自己定义看看，（emmm，这里我感觉element-ui的校验规则更好一丢丢）。

好了，既然定义好了登录界面，就可以试试向后端发起请求了。

这里开始在api文件夹下面创建一个文件user.js然后编写一个登录接口函数

import request from '../utils/request'  //创建一个调用登录接口函数 export const userLoginService = (loginData) =>{     //用urlSearchParams完成传递     const params = new URLSearchParams()     for(let key in loginData){         params.append(key,loginData[key]);     }     return request.post('/user/login',params); }

定义之后就去登录页调用

                   Submit         

在submit提交这里加上@click="login"

然后定义方法：（获取信息，如果msg提示信息不为0，则显示消息，为0就表示登陆成功）

const login = async()=>{     let result = await userLoginService(loginData.value);     alert(result.msg?result.msg:'登录成功'); }

不过，这里用浏览器默认的alert感觉不太美观啊，毕竟都用组件库了，

消息类型：就决定是你了！

引入一手修改代码，

好，感觉这样也就差不多了，下面展示一下登录页代码

好了，今天的前端就忙碌到这里吧（下一篇文章再见）。

总结一下：1.完成了前端初始化4步，2.完成了全局页面的布局，3.完成了搜索页的代码，和登录页的代码。