[记录二] Vue(全家桶)+node+koa2+mysql+nginx+redis，博客全栈项目之web前端vue

落日映苍穹つ 2022-11-29 05:55 21阅读 0赞

导语：

暑假在家闲着无事，就琢磨着做一个web博客练练手，现在已经做完了，把过程分享出来给大家看看，分享一下学习经验。这是第二篇，主要讲node，webpack和vue-cli环境的搭建，使用vue全家桶，写好路由，构建静态页面，为后续的api请求的编写打下基础。

> **微信搜索 【web小馆】，回复 “全栈博客项目”，即可获取 项目源码和后续的实战文章教程。**

### 本文的目录 ###

*  一，环境的搭建
 *   *  1，node下载
     *  2，vue和vue-cli下载
 *  二，配置vue和编写部分页面的代码

# 一，环境的搭建 #

## 1，node下载 ##

如果本机没有安装node运行环境，请到官网下载node 安装包进行安装，如果本机已经安装node，要更新到最新的node 版本  
官网下载地址：[https://nodejs.org/en/][https_nodejs.org_en] 或者 [http://nodejs.cn/][http_nodejs.cn]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]  
选择current下载。傻瓜式安装，一直点next就行了。  
安装好了之后输入cmd打开命令行窗口 进入安装路径 输入node -v和npm-v查看node版本，如果有输出就表示已经下载安装好了。

## 2，vue和vue-cli下载 ##

npm install vue -g
    npm install vue-cli -g

下载好了之后，到你要的目录下面创建一个项目就行了

vue init webpack myProject

yes yes no no  
他会有一些vue项目的配置给你选择，根据你的需要去输入y或者n就行了，然后在对应目录的终端命令行上面输入npm run dev。  
至此你的vue项目就运行起来了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]

# 二，配置vue和编写部分页面的代码 #

根据我们项目的需要，我们需要给我的vue项目加上vuex和vue-router，axios这些东西，使用vue全家桶来进行开发。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]

npm install
    npm install vue-router --save-dev
    npm install axios --save
    npm install vuex --save

安装好这些依赖后，我们来看一看这个vue前端项目的各个文件的作用。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][20200819172626184.png_pic_center]  
![home组件][home]

![article组件][article]

![me组件][me]

<template>
      <div class="home">
        <scroll :listen-scroll="listenScroll" :probe-type="probeType" class="list1" ref="list" :data="list" @scrollToEnd="upmethod" :pullup="up" @scroll="scroll" >
          <div class="article-list-wrapper">
            <Rotation :height= "handlheight" :list="bannerList" effect="zoom"></Rotation>
            
            <van-divider>最新文章</van-divider>
            <div class="card_group">
              <div class="ca" v-for="(item, index) in list" :key="index" @click="to($event)" :ID="item.id">
                <img :src="item.pic" class="caimg">
                <div class="caleft">
                  <div class="title">{
       {item.title}}</div>
                  <div class="text">{
       {item.lei}}</div>
                  <div class="imformation">点击量 {
       {item.hits}}     收藏量 {
       {item.likes}}</div>
                </div>
              </div>
            </div>
          </div>
        </scroll>
    
        <router-view></router-view>
      </div>
    </template>
    
    <script> import Vue from 'vue'; import scroll from '@/base/scroll/scroll' import toast from '@/base/toast/toast' import { Divider, ContactList } from 'vant'; import { Card } from 'vant'; import Rotation from '@/components/Rotation/Rotation' import { get, getbaners } from '@/api/home' import { getSession, logOut } from '@/api/user' Vue.use(Divider); Vue.use(Card); export default { data() { return { isLoading: false, list: [], num: 0, more: 'true', bannerList: [] }; }, methods: { to(e) { //查看文章详情 this.$router.push({ path: `/home/${ e.currentTarget.id}` }) }, _get() { //获取文章 let number = this.num + 10 // console.log(number) get(number).then((res) => { if (res.data.errno == 0) { // console.log(res.data) this.list = res.data.data console.log(this.list) this.more = res.data.message } }) }, _getbaners() { //获取轮播图图片 getbaners().then(res => { if (res.data.errno == 0) { this.bannerList = res.data.data } }) }, getsession(){ //检验登陆 getSession().then(res => { console.log(res) }) // console.log(this.$store.getters.getCurrentUser) // console.log(this.$store.getters.getIsLogin) }, logout() { //退出登录 logOut().then(res => { console.log(res) }) this.isLoading = true setTimeout(() => { this.isLoading = false }, 1500); this.$store.commit('updateUserStatus',null); }, scroll(pos) { //滚动事实位置 this.scrollY = pos.y }, upmethod() { //上拉加载 console.log("jiazai") if (this.more == 'true') { this._get() } else { console.log('meile') } } }, created () { this._get() this._getbaners() this.listenScroll = true this.probeType = 3 this.up = true }, computed: { handlheight() { return `${ document.body.clientWidth/2.4}px` } }, components: { Rotation, scroll, toast } }; </script>
    
    <style scoped> .home{ position: fixed; top: 50px; bottom: 50px; width: 100%; background-color: #f1f1f1; } .article-list-wrapper{ padding-top: 10px; } .list1{ height: 100%; overflow: hidden; } .ca{ height: 100px; display: flex; background-color: #fdfbfb; margin: 5px 10px 15px 10px; border-radius: 10px; } .caimg{ margin: 15px 20px 10px 20px; border-radius: 10px; height: 70px; width: 70px; } .caleft{ padding: 20px 10px 10px 0px; display: block; } .title{ font-size: 14px; margin-right: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .text{ font-size: 13px; margin-right: 8px; margin-top: 2px; color: #8a8a8a; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .imformation{ margin-top: 10px; font-size: 11px; margin-right: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #8c8a8a; } </style>

<template>
      <div class="article" ref="article">
        <van-grid :gutter="10" column-num="3">
          <van-grid-item v-for="(item,index) in list" :key="index" :icon="item.icon" :text="item.text" :to="item.to" :id="item.to" />
    
        </van-grid>
        <router-view></router-view>
      </div>
    </template>
    <script> import Vue from 'vue'; import { Grid, GridItem } from 'vant'; Vue.use(Grid); Vue.use(GridItem); export default { data() { return { list : [ { icon : 'http://47.***.***.222:80/api/file/icon?pic=tikuman.png', text: '前端', to: '/article/前端', id: '前端'}, { icon : 'http://47.***.***.222:80/api/file/icon?pic=string.png', text: 'htmlcss', to: '/article/htmlcss', id: 'htmlcss'}, { icon : 'http://47.***.***.222:80/api/file/icon?pic=stack.png', text: 'javascript', to: '/article/javascript', id: 'javascript'}, { icon : 'http://47.***.***.222:80/api/file/icon?pic=tree.png', text: 'jquery', to: '/article/jquery', id: 'jquery'}, { icon : 'http://47.***.***..222:80/api/file/icon?pic=link.png', text: 'vue', to: '/article/vue', id: 'vue'}, { icon : 'http://47.***.***.222:80/api/file/icon?pic=queue.png', text: '小程序', to: '/article/小程序', id: '小程序'}, { icon : 'http://47.***.***.222:80/api/file/icon?pic=sort.png', text: '后端', to: '/article/后端', id: '后端'}, { icon : 'http://47.***.***.222:80/api/file/icon?pic=hash.png', text: 'node', to: '/article/node', id: 'node'}, { icon : 'http://47.***.***.222:80/api/file/icon?pic=heap.png', text: '华农oj', to: '/article/**', id: '**'} ] } }, methods: { to(e) { console.log(e.currentTarget.id) this.$router.push({ path: `/article/${ e.currentTarget.id}` }) }, } } </script>
    
    <style scoped> .article{ padding-top: 80px; background-color: #f1f1f1; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } </style>

<template>
      <div class="me" ref="me">
        <div class="user">
          <van-image
            round
            width="5rem"
            height="5rem"
            :src= "avatar"
          />
          <div class="username" v-html="name"></div>
        </div>
        <div class="hr"></div>
        <div class="tooldiv">
          <van-cell title="我的收藏" is-link class="cell" icon="label-o" to= "/me/like" icon-color="#eeeeee"/>
          <van-cell title="历史阅读" is-link class="cell" icon="bookmark-o" />
          <van-cell title="设置" is-link class="cell" icon="setting-o" to= "/me/imformation"/>
        </div>
         <router-view></router-view>
      </div>
    </template>
    
    <script> import Vue from 'vue'; import { Image as VanImage } from 'vant'; import { Cell, CellGroup } from 'vant'; Vue.use(Cell); Vue.use(CellGroup); Vue.use(VanImage); export default { data() { return { } }, methods: { to() { this.$router.push({ path: `/me/like` }) }, }, computed: { avatar() { if (this.$store.getters.getIsLogin){ return this.$store.getters.getCurrentUser.avatar } else { return 'http://47.***.***.222:80/api/file/avatar?pic=logo.png' } }, name() { if (this.$store.getters.getIsLogin){ return this.$store.getters.getCurrentUser.realname } else { return '轻松学算法' } } }, } </script>
    
    <style scoped> .me{ padding-top: 80px; background-color: #f1f1f1; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .user{ background-color: #a2ebb9; padding: 30px 0 30px 0; text-align: center; margin: 10px 30px 10px 30px; border-radius: 20px; } .tooldiv{ display: block; margin-top: 20px; } .hr{ height: 1.5px; background-color: #d8d8d8; margin: 4px 20px 4px 20px; } .cell{ margin-bottom: 3px; } </style>

我们先把这三个页面给编写出来。

![在这里插入图片描述][20200819195904573.png_pic_center]  
**各位看官给我点个赞鼓励鼓励呗，谢谢啦**~~~

补充：  
![在这里插入图片描述][20200902155530706.jpg_pic_center]  
微信搜索【web小馆】，回复**全栈博客项目**，即可获取**项目源码和后续的实战文章教程**。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[https_nodejs.org_en]: https://nodejs.org/en/
[http_nodejs.cn]: http://nodejs.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/a669cbea6a2946639b5806f4ad862b9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/cf98dc3c4eab40049afe62c100e4ae52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/2581893cfe0741c3b35ad28a60d85f97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/229198c626cc4ebcbef44fcf494ba1b8.png
[20200819172626184.png_pic_center]: /images/20221124/ae4dd62be7a64fd5a96ba407249e4fd6.png
[home]: /images/20221124/f462c7d9bcde432195975b1303ec35c3.png
[article]: /images/20221124/8ccdb731c53842a1b7e4a423c816dbfe.png
[me]: /images/20221124/4fa0dc2eb3a548128366493cdb69d7ba.png
[20200819195904573.png_pic_center]: /images/20221124/9d7a3cccca794fa59ee01094b7677380.png
[20200902155530706.jpg_pic_center]: /images/20221124/a9041b03334e47f6aec0c3a3fc8b8051.png
[20200825125805528.png_pic_center]: /images/20221124/21387e1291704f85966a65035bbcf42b.png
[node]: /images/20221124/105aa01c55c24de983303318265a25e4.png