uni-app 前后端调用实例 基于Springboot

锋哥原创的uni-app视频教程：

2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)，火爆更新中...共计23条视频，包括：第1讲 uni-app简介、第2讲 uni-app环境搭建、第3讲 uni-app之HelloWorld实现等，UP主更多精彩视频，请关注UP账号。https://www.bilibili.com/video/BV1eG411N71c/

SpringBoot后端实例搭建

新建数据库db_uni

打开idea 新建项目uni-pro1

pom.xml

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.3.2.RELEASE
         
    
    com.java1234
    uni-pro1
    0.0.1-SNAPSHOT
    uni-pro1
    uni-pro1

    
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            mysql
            mysql-connector-java
            runtime
        

        
        
            com.alibaba
            druid
            1.1.10
        
        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.3.2
        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.3.2
        

        
            org.projectlombok
            lombok
            true
        


    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                2.3.2.RELEASE
            
        
    

application.yml

server:
  port: 80
  servlet:
    context-path: /

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/db_uni?serverTimezone=Asia/Shanghai
    username: root
    password: 123456


mybatis-plus:
  global-config:
    db-config:
      id-type: auto
  configuration:
    map-underscore-to-camel-case: true
    auto-mapping-behavior: full
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:mapper/*.xml

目录结构：

启动类 UniPro1Application 加下 扫描注解：

@MapperScan("com.java1234.mapper")

新建NewsController类

/**
 * 新闻Controller控制器
 * @author java1234_小锋 （公众号：java1234）
 * @site www.java1234.vip
 * @company 南通小锋网络科技有限公司
 */
@RestController
@RequestMapping("/news")
public class NewsController {

    @Autowired
    private NewsService newsService;

    /**
     * 测试
     * @return
     */
    @GetMapping("/test")
    public R test(){
        return R.ok("测试");
    }

}

测试：http://localhost/news/test

uni-app前端实例搭建

新建uni-app项目 java1234Pro2

新建两个页面

pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/list/list",
			"style": {
				"navigationBarTitleText": "列表页",
				"enablePullDownRefresh": true
			}
		},
		{
			"path": "pages/detail/detail",
			"style": {
				"navigationBarTitleText": "详情页"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}