# 毕设-校园点餐系统

**Repository Path**: yansir-git/my-end

## Basic Information

- **Project Name**: 毕设-校园点餐系统
- **Description**: go + vue3 + uniapp
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-03-06
- **Last Updated**: 2024-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# 毕设-校园点餐系统

#### 介绍
go + vue3 + uniapp

#### Vue项目文件结构

~~~
├── node_modules/        # 项目依赖的 node 模块
├── public/              # 公共资源目录
│   ├── favicon.ico      # 网页图标
│   └── index.html       # html模板（单页面应用）
├── src/                 # 源代码目录
│   ├── assets/          # 静态资源文件夹，如图片、字体等
│   ├── components/      # 公共组件
│   ├── router/          # 路由文件夹
│   ├── store/           # Vuex / pinia状态管理文件夹
│   ├── views/           # 视图层组件
│   ├── App.vue          # Vue 根组件，也是整个应用的入口
│   └── main.js          # Vue 实例化入口文件，也是整个应用的入口
├── .babelrc             # Babel 配置文件
├── .gitignore           # Git管理忽略文件
├── package.json         # 项目配置文件
├── README.md            # 项目说明文件
└── webpack.config.js    # Webpack配置文件
~~~

#### Computed和Watch区别

~~~
当需要在变化后执行业务逻辑时使用watch
当需要缓存取值以优化性能时使用computed
~~~

#### Go项目结构参考

~~~
https://blog.csdn.net/wohu1104/article/details/123209272
~~~

#### 前端JSON易错

~~~
不带引号为number类型
带引号为string类型
后端接收的时候极易出问题！！！！！！！！！！！！！
~~~

~~~
个人：
通过url传递的参数一般是使用form表单显示传递的
其余的大部分是使用json格式传递到
~~~

#### 数据库易错

~~~
GORM（Go语言的ORM库）中，结构体字段和数据库表字段之间的映射默认使用结构体字段名的蛇形命名来匹配数据库中的列名。例如，如果你有一个结构体字段 UserName，GORM 会尝试在数据库中查找名为 user_name 的列。GORM虽然使用了一些默认的命名规则，但也允许你通过标签（tag）来明确指定字段和数据库列之间的映射关系。
~~~

#### 前端Vue-route易错

~~~
Error：无限重定向
//添加相应的全局守卫
//前置守卫
router.beforeEach((to, from, next) => {
    //访问路由组件的之前,进度条开始动
    Nprogress.start();
    //动态设置网页左上角的标题
    document.title = `syt-${to.meta.title}`;
    //判断用户是否登录-token
    let token = GET_TOKEN()
    //用户登陆了
    if (token) {
        next();
    } else {
        // 用户未登录，检查是否要跳转到登录页面  
        if (to.path !== '/login') {
            // 如果目标路由不是登录页面，则重定向到登录页面  
            console.log("用户未登录，跳转到登录页面");
            next({ path: '/login' });
        } else {
            // 如果已经是登录页面，则直接通过，避免无限重定向  
            next();
        }
    }
});
~~~

#### 上传图片功能小记

~~~
上传文件：file类型，实际上是传递的file.raw
详见：https://blog.csdn.net/m0_62461358/article/details/130235276
~~~

#### 父子组件通信

~~~
<OwnUpload class="upload" ref="ownUpload"></OwnUpload>

const ownUpload = ref(null)

解释：在这个例子中，ownUpload 是一个响应式引用，初始化为 null。当 <OwnUpload> 组件在模板中被渲染时，Vue 将自动把组件实例赋值给 ownUpload.value。然后，你可以在 onMounted 生命周期钩子中或其他适当的地方通过这个引用来访问子组件。
但是，请注意，直接操作子组件的内部状态或方法通常是不推荐的，因为这破坏了组件的封装性。在大多数情况下，你应该使用 props 向下传递数据，并使用自定义事件 ($emit) 向上传递信息。
如果你确实需要在父组件中调用子组件的方法，你应该确保这个方法是通过 defineExpose 在子组件中暴露出来的。

PS：好用不推荐
~~~

#### emits案例

~~~
emits使用案例，存在与前端项目的dish下，其下包含dishOp和index两个目录，emits案例就在其中，可以参考。
~~~

#### 小程序跳转使用方法

~~~
注意switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面
跳转不带tab的页面还是用redirectTo或者navigateTo(不能跳到带tab的页面)
note:https://blog.csdn.net/Kiruthika/article/details/118189698
~~~

#### vue2和vue3获取this方法的差异

~~~
vue2通过this直接使用
vue3通过getCurrentInstance返回this（关于里面的ctx啥的在生产环境下不能使用的问题可以后续查看）
https://geek-docs.com/vuejs/vue-js-questions/556_vuejs_how_to_get_the_this_instance_in_vue_3.html
~~~

#### 前端vue分页插件调用两次获取数据方法的原因-bug

~~~
前端掉用了两次getList的原因：分页之后获取数据时第一次调用返回的total为0导致的重新调用逻辑
GPT解释：
如果后端返回的 total 参数为0，而前端分页组件（如Element UI的Pagination组件）依赖于这个 total 参数来确定总共有多少页，并且当前页（currentPage）是否有效，那么当 total 变为0时，分页组件可能会重置到第一页（通常是默认行为）。
所以后端为什么会返回为0呢？
后端代码：
​~~~
func GetPcOrderListFromDb(orderListPageParam *pageReq.PcOrderListPageReq, c *gin.Context) ([]resp.OrderListWithDetailsResp, *int64, error) {
	var orderList []resp.OrderListWithDetailsResp
	var total int64
	query := db.Model(resp.OrderListWithDetailsResp{})
	if orderListPageParam.StoreId > 0 {
		query.Where("store_id = ?", orderListPageParam.StoreId)
	}
	if orderListPageParam.UserName != "" {
		query.Where("user_name like ?", "%"+orderListPageParam.UserName+"%")
	}
	// 排序
	query = query.Order("status asc , create_time asc")
	err := query.Scopes(tools.Paginate(c)).Find(&orderList).Count(&total).Error
	if err != nil {
		fmt.Println("分页查询出问题了")
		return nil, nil, err
	}
	return orderList, &total, err
} 
​~~~
GPT解释：
在 GORM 中，当你使用分页（Scopes）和 Find 方法结合 Count 方法时，可能会遇到一个问题，即 Count 方法可能不会按照你期望的那样工作，特别是当分页作用域（Scopes）改变了查询的 SQL 语句时。
tools.Paginate(c) 这个作用域（Scope）很可能为查询添加了 LIMIT 和 OFFSET 子句，以便只返回特定页的数据。但是，当你在这之后调用 Count 方法时，由于 LIMIT 和 OFFSET 子句的存在，Count 方法可能无法正确计算总数，因为它可能只计算了被 LIMIT 约束的那一部分数据的数量。
为了解决这个问题，你应该在调用 Find 之前单独调用 Count 方法来获取总数，而不是在 Find 方法之后。但是，由于分页作用域（Scopes）可能会改变查询，你需要确保在调用 Count 时不使用分页作用域。
解决方法：
提前调用count方法，代码如下：
​~~~
func GetPcOrderListFromDb(orderListPageParam *pageReq.PcOrderListPageReq, c *gin.Context) ([]resp.OrderListWithDetailsResp, *int64, error) {
	var orderList []resp.OrderListWithDetailsResp
	var total int64
	query := db.Model(resp.OrderListWithDetailsResp{})
	// 先查总数---提到了最前面，此时query里面还没有查询条件限制
	err := query.Scopes(tools.Paginate(c)).Count(&total).Error
	if err != nil {
		fmt.Println("分页查询total出问题了")
		return nil, nil, err
	}
	if orderListPageParam.StoreId > 0 {
		query.Where("store_id = ?", orderListPageParam.StoreId)
	}
	if orderListPageParam.UserName != "" {
		query.Where("user_name like ?", "%"+orderListPageParam.UserName+"%")
	}
	// 排序
	query = query.Order("status asc , create_time asc")
	err = query.Scopes(tools.Paginate(c)).Find(&orderList).Error
	if err != nil {
		fmt.Println("分页查询出问题了")
		return nil, nil, err
	}
	return orderList, &total, err
}
​~~~
~~~