::: hljs-right DATE: October 28, 2024 :::

uni-app

打开文件夹发现代码是这样的,(狗头.jpg)

	c5ca: function (e, t, n) {
	 "use strict";
	 var i = {
	     "mescroll-uni": function () {
	       return Promise.all([n.e("common/vendor"), n.e("components/mescroll-uni/mescroll-uni")]).then(n.bind(null, "a58e"))
	     }
	   },
	   r = function () {
	     var e = this,
	       t = e.$createElement,
	       n = (e._self._c, e.isAuth("kechengxinxi", "修改")),
	       i = e.isAuth("kechengxinxi", "删除"),
	       r = e.__map(e.list, (function (t, n) {
	         var i = t.tupian.split(",");
	         return {
	           $orig: e.__get_orig(t),
	           g0: i
	         }
	       })),
	       s = e.isAuth("kechengxinxi", "新增");
	     e.$mp.data = Object.assign({}, {
	       $root: {
	         m0: n,
	         m1: i,
	         l0: r,
	         m2: s
	       }
	     })
	   },
	   s = [];
	 n.d(t, "b", (function () {
	   return r
	 })), n.d(t, "c", (function () {
	   return s
	 })), n.d(t, "a", (function () {
	   return i
	 }))
	}

但其实这个应该是打包过的,但我找到源码后发现,原项目有很多.vue的文件,但又没有package.json,最后发现了uni.scss,源码是使用了uniapp的,使用了HbuliderX作为IDE也更方便调试。 下是uniapp和HbuilderX的介绍:

  1. https://uniapp.dcloud.net.cn/
  2. https://www.dcloud.io/hbuilderx.html

这里很推荐HbuilderX,测试模拟都很方便,离谱的是微信开发工具打开的文件竟然每个都要手动格式化,而且排版莫名难受。

image.png

image.png

前后端信息传递流程

Spring MVC

1 前端:调用函数,进行api请求

return http.request({
		url: `${tableName}/list`,
		method: 'GET',
		data
	});

2 前端:向后端发送HTTP请求

3 后端服务器(如Tomcat)接收到HTTP请求

并将其转发到Spring MVC的DispatcherServlet。

4 DispatcherServlet处理请求

DispatcherServlet 是 Spring Web MVC 框架中的核心组件之一,它负责处理所有的 HTTP 请求并将其分发到相应的处理器(通常是控制器,即 Controller)。

5 控制器接收请求

控制器(Controller)接收请求并调用服务层(Service)。 UserController.java

	@Controller
	@RequestMapping("/users")
	public class UserController {
	  @Autowired
	  private UserService userService;
	  @GetMapping("/list")
	  public ResponseEntity<List<User>> listUsers(@RequestParam Map<String, String> data) {
	      List<User> users = userService.listUsers(data);
	      return ResponseEntity.ok(users);
	  }
	}

6 服务层处理请求

服务层(Service)负责处理业务逻辑,调用数据访问层(DAO)来查询数据库。 UserService.java:

	@Service
	public class UserService {
	  @Autowired
	  private UserDao userDao;
	  public List<User> listUsers(Map<String, String> data) {
	      // 根据data中的条件进行查询
	      return userDao.findAll();
	  }
	}

7 数据访问层查询数据库

数据访问层(DAO)使用MyBatis来执行数据库查询。 UserDao.java:

	public interface UserDao {
	  List<User> findAll();
	}

对应的MyBatis映射文件:UserDao.xml:

	<mapper namespace="com.example.dao.UserDao">
	  <select id="findAll" resultType="com.example.entity.User">
	      SELECT * FROM users
	  </select>
	</mapper>