2023-8-3

最新推荐文章于 2024-05-18 11:09:56 发布

GUET415

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量46

点赞数

分类专栏：实习日志文章标签：前端

本文链接：https://blog.csdn.net/m0_53286358/article/details/132090434

版权

实习日志专栏收录该内容

16 篇文章 0 订阅

订阅专栏

底部导航栏--页面切换

为每一个底部按钮添加界面

每个界面包含一下三个文件（直接复制即可）

最终

设置首页index

更改index包下的index.config.js，设置标题名称

在app.config.js中设置路由

在底部导航栏的index文件中设置跳转函数

其它三个界面类似上边的操作

轮播图

在首页界面的index中加入轮播图代码

<View className='index'>
      <Swiper
        className='swiper'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        vertical={false}
        circular
        indicatorDots
        autoplay>
        <SwiperItem className='swiper-item'>
          <image src='http://43.139.94.243/images/ban1.jpg'></image>
        </SwiperItem>
        <SwiperItem className='swiper-item'>
          <image src='http://43.139.94.243/images/ban2.jpg'></image>
        </SwiperItem>
        <SwiperItem className='swiper-item'>
          <image src='http://43.139.94.243/images/ban3.jpg'></image>
        </SwiperItem>
      </Swiper>

在index.scss中调整图片样式

效果

循环生成菜单及对应内容

catagory目录下的index.jsx文件

当前数据一级写死，引用了TaroUI组件


import './index.scss'
import TaBar from '../common/index'
import {Text, View} from "@tarojs/components";
import {Component} from "react";
import { AtTabs, AtTabsPane } from 'taro-ui'

export default class Index extends Component{
  
  constructor() {
    super();
    this.state={
      current:0,
      br:'\n',
      firstCategoryArr: [
        {id: 1, title: "手机产品"},
        {id: 2, title: "时尚耳机"},
        {id: 3, title: "MINI相机"},
        {id: 4, title: "电脑硬盘"},
        {id: 5, title: "鼠标键盘"},
        {id: 6, title: "平板电脑"},
        // {id: 7, title: "手机产品"},
        // {id: 8, title: "时尚耳机"},
        // {id: 9, title: "MINI相机"},
        // {id: 10, title: "电脑硬盘"},
        // {id: 11, title: "鼠标键盘"},
        // {id: 12, title: "平板电脑"},
        // {id: 13, title: "手机产品"},
        // {id: 14, title: "时尚耳机"},
        // {id: 15, title: "MINI相机"},
        // {id: 16, title: "电脑硬盘"},
        // {id: 17, title: "鼠标键盘"},
        // {id: 18, title: "平板电脑"},
      ],
      secondCategoryArr: [
        {pId: 1, id: 111, title: "手机产品1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
        {pId: 1, id: 112, title: "手机产品2",img: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png'},
        {pId: 1, id: 113, title: "手机产品3",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 1, id: 115, title: "手机产品4",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 1, id: 116, title: "手机产品5",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 2, id: 211, title: "时尚耳机1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'},
        {pId: 2, id: 212, title: "时尚耳机2",img: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png'},
        {pId: 2, id: 213, title: "时尚耳机3",img: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png'},
        {pId: 3, id: 311, title: "MINI相机1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
        {pId: 3, id: 312, title: "MINI相机2",img: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png'},
        {pId: 3, id: 313, title: "MINI相机3",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 4, id: 411, title: "电脑硬盘1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'},
        {pId: 4, id: 412, title: "电脑硬盘2",img: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png'},
        {pId: 4, id: 413, title: "电脑硬盘3",img: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png'},
        {pId: 5, id: 511, title: "鼠标键盘1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
        {pId: 5, id: 512, title: "鼠标键盘2",img: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png'},
        {pId: 5, id: 513, title: "鼠标键盘3",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
        {pId: 6, id: 611, title: "平板电脑1",img: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'},
        {pId: 6, id: 612, title: "平板电脑2",img: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png'},
        {pId: 6, id: 613, title: "平板电脑3",img: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'},
      ]

    }
  }

  handleClick=(index)=>{
    this.setState({
      current:index
    })
  }

  render() {
    return (
      <View className='catagory'>
        <AtTabs
          current={this.state.current}
          scroll
          animated={false}
          height='250px'
          tabDirection='vertical'
          tabList={this.state.firstCategoryArr}
          onClick={this.handleClick.bind(this)}>
          {
            this.state.firstCategoryArr.map((firstLeveMenu)=>{
              return(
                <AtTabsPane tabDirection='vertical' current={this.state.current} index={0} className='tabsPane'>
                  {
                    this.state.secondCategoryArr.map((secondLeveMenu)=>{
                      //判断二级菜单的pid==一级菜单id
                      if (firstLeveMenu.id==secondLeveMenu.pId){
                        return(
                          <View className='paneContent'>
                            <image src={secondLeveMenu.img} style='height:80px ; width:80px'></image>
                            <Text>{this.state.br}</Text>
                            <Text>{secondLeveMenu.title}</Text>
                          </View>
                        )
                      }
                    })
                  }
                </AtTabsPane>
              )
            })
          }
        </AtTabs>
        <TaBar current={1}></TaBar>
      </View>
    )
  }
}

效果

显示标题以及图片

在catagroy目录下index.scss中

.tabsPane{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.paneContent{
  text-align: center;
  font-size: 30px;
  border: 1px solid #DDDDDD;
  margin-bottom: 20px;
}

效果

后端取到首页的数据

建立数据库

建立后端获取数据库中的数据

建立springBoot项目

IDEA打开，配置application.properties文件


server.port=9000
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/16ban?useUnicode=true&characterEncoding=utf8&autoReconnect=true&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456

mybatis.mapper-locations=classpath:mapper/*Mapper.xml

logging.level.com.example.weappdemo.mapper=DEBUG

将generatorConfig.xml放置于resource目录下，并完成配置

将Generator类置于weappdemo目录下，修改路径

利用Generator函数生成相关文件

加入统一返回结果类

增加控制器controller

小程序应用Taro中的request发送请求

官网中request的用法

url需要用到花生壳

注册好账号
添加映射，选择HTPPS（可以需要购买）

复制域名地址

对微信开发者工具可能报域名不合法问题

点击“详情”--“本地设置”---勾选“不校验合法域名”

效果

GUET415

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2023-8-3

将generatorConfig.xml放置于resource目录下，并完成配置。IDEA打开，配置application.properties文件。更改index包下的index.config.js，设置标题名称。将Generator类置于weappdemo目录下，修改路径。点击“详情”--“本地设置”---勾选“不校验合法域名”在catagroy目录下index.scss中。在底部导航栏的index文件中设置跳转函数。在app.config.js中设置路由。增加控制器controller。
复制链接

扫一扫