uniapp博客小程序开发--架构搭建

小编作为前端程序员，技术高低不就，在公司摸鱼之时，决定写一个小程序练练手，便随便从uniapp官网拉一个模板进行开发。
涉及知识点：

1. 以vue2作为主要开发语言，组件库为uview-ui1.x，类似于vant。
2. 服务端数据用到mockjs，以及通过nest结合MongoDB编写接口
   下面在模板的基础上进行二次开发，架构我也先搭建好了，方便后续开发。
   链接：https://pan.baidu.com/s/17tO6VxpEQsWmuuov88oPwg?pwd=zpvu
   提取码：zpvu
   

项目架构搭建

1. 根目录创建一个utils文件夹，新增mockRequest.js文件
   mockRequest.js

import axios from '@/js_sdk/gangdiedao-uni-axios'

// 创建自定义接口服务实例
const http = axios.create({
	baseURL: '/mock',//根据个人后端情况，修改此处baseURL
	timeout: 6000, // 不可超过 manifest.json 中配置 networkTimeout的超时时间
	withCredentials: true,
	headers: {
		'Content-Type': 'application/json',
		//'X-Requested-With': 'XMLHttpRequest',
	},
})

// 拦截器 在请求之前拦截   添加token
http.interceptors.request.use(config => {
	//请求前有关处理逻辑
	return config
})
// 响应后的拦截
http.interceptors.response.use(response => {
    //响应拦截处理逻辑
	return response;
}, error => {
	
	return Promise.reject(error.message)
})

export default http

2. 根目录创建mock文件夹，新增swiper.json和index.js文件，存放首页轮播图假数据，图片可自行准备
   swiper.json

[
		{"id":1,"image":"/static/image/swiper1.jpg"},
		{"id":2,"image":"/static/image/swiper2.jpg"},
		{"id":3,"image":"/static/image/swiper3.jpg"}
]

index.js

import Mock from 'mockjs'
import swiper from './swiper.json'
Mock.mock('/mock/swiper',{code:200,data:swiper})

4. 根目录创建一个api文件夹，新增index.js文件
   index.js文件

import mockRequest from '@/utils/mockRequest.js'

//轮播图
export const getSwiper=()=>mockRequest.get('/swiper')

实现轮播图

<template>
  <view class="">
    <u-navbar back-text="首页" :customBack="back" backIconName=" " :backTextStyle="backTextColor" backIconColor="#39CCCC" :background="background">
      <view class="search-wrap" @click="toSearch">
        <!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
        <u-search height="56" :showAction="false"></u-search>
      </view>
    </u-navbar>
    <view class="">
      <view class="toptem">
        <u-swiper :list="swiper" border-radius="0" :effect3d="true"></u-swiper>
      </view>
      <u-gap bgColor="#ededed" height="20"></u-gap>
      <!-- list -->
      <list></list>
    </view>
    <u-back-top :scrollTop="scrollTop" :mode="modeTop" :bottom="bottomTop" :right="rightTop" :top="top" :icon="iconTop" :custom-style="customStyle" :icon-style="iconStyleTop" :tips="tips"> </u-back-top>
  </view>
</template>

<script>
import list from '@/components/list'
export default {
  components: { list },
  data() {
    return {
      swiper: [],
      background: {
        'background-image': 'linear-gradient(45deg, #2BC3C8, #84E7B9)'
      },
      backTextColor: {
        color: '#ffffff'
      },
      // top
      scrollTop: 0,
      modeTop: 'circle',
      bottomTop: 200,
      rightTop: 40,
      top: 600,
      iconTop: 'arrow-up',
      iconStyleTop: {
        color: '#ffffff',
        fontSize: '30rpx'
      },
      customStyle: {
        backgroundColor: '#39CCCC',
        color: '#ffffff'
      },
      tips: '顶部'
    }
  },
  onLoad() {},
  methods: {
    toSearch() {
      this.$common.navigateTo('/pages/index/search')
    },
    back() {
      // 首页
      uni.navigateBack({
        delta: 2
      })
    },
    toDetail() {
      this.$common.navigateTo('/pages/index/detail')
    },
    // 回到顶部
    onPageScroll(e) {
      this.scrollTop = e.scrollTop
    },
    //轮播图
    async getSwiper() {
		const {
			data: res
		} = await this.$API.getSwiper();
		console.log(res);
		if (res.code !== 200) return;
		this.swiper = res.data;
	}
  }
}
</script>

<style lang="scss">
.search-wrap {
  margin: 0 30rpx 0 10rpx;
  flex: 1;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx;
}

.u-body-item image {
  width: 180rpx;
  flex: 0 0 180rpx;
  height: 150rpx;
  border-radius: 6rpx;
  margin-right: 12rpx;
}

.height {
  height: 88rpx;
}

.toptem {
  padding: 20rpx 0;
}
</style>

运行项目