天天看點

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

目錄

​​一、前言介紹:​​

​​二、主要技術: ​​

​​2.1 Java技術架構介紹:​​

​​2.2 MYSQL資料庫:​​

​​2.3 微信開發者工具​​

​​三、系統設計:​​

​​3.1 系統架構設計:​​

​​3.2 登入時序圖設計:​​

​​四、功能截圖: ​​

​​4.1 微信小程式端:​​

​​4.1.1登入注冊:​​

​​4.1.2 首頁資訊:​​

​​4.1.3 美食資訊:​​

​​4.1.4 美食詳情:​​

​​4.1.5 購物車資訊:​​

​​4.1.6 我的子產品: ​​

​​4.2 背景管理者端:​​

​​4.2.1 管理者登入:​​

​​4.2.2 餐廳管理子產品:​​

​​4.2.3 美食管理子產品:​​

​​4.2.4美食資訊資訊:​​

​​五、代碼實作:  ​​

​​六、論文文檔:​​

​​八、源碼擷取:​​

一、前言介紹:

        傳統的校園訂餐管理方式都在使用手工記錄的方式進行資料的登記,這種方式耗時,而且對于資料量比較大的情況想要快速查找某一資料非常慢,對于資料的統計擷取比較繁瑣,随着網絡技術的發展,采用電腦管理相關資料資訊管理與資料查詢等諸多環節已成為必然趨勢;資料情況的透明化,提高了資訊管理的透明度,提高管理效率。

        傳統的校園訂餐管理需要對各類資訊及時的進行記錄、規整、更新、收藏,這是對資料資訊統計管理的極大消耗,在其進行過程中,還會出現因資訊的重複傳遞,出現本可以避免的出錯問題,例如:前後資料不一緻、種類纰漏以及備注不詳細等等一系列問題。在資訊告訴更替的時代,資訊的準确性,經濟可行性也無疑是衆人關注的焦點。那麼我們系統的目的性也就很明确。

二、主要技術: 

2.1 Java技術架構介紹:

        Java以Linux為基礎并且使用Java語言進行開發的操作平台。Java的開放性讓他允許所有人對系統進行修改和完善,這一點也讓他在近些年成為便攜裝置上主要的作業系統。Java同時還内置了内置豐富的應用程式,比如電話、攝像頭、播放器。這些都為在系統上開發程式提供了便利。該系統運用小程式完成前台的開發,包括登入注冊、個性化特征的收集、使用者使用我們這個校園訂餐小程式隻需一個Java手機就可以使用了,而且所有操作都是我們熟悉的操作手法。所有的操作通過手機就可以完成,使用者不需教育訓練,隻要稍微提示一下即可。是以開發校園訂餐小程式使用小程式技術不僅友善了開發者而且使用者使用起來也非常友善,可以說是相對來說比較完美的開發平台了。

2.2 MYSQL資料庫:

        MySQL資料庫使用的語言是SQL語言。MySQL在儲存資料時是根據資料的類型和特征分開儲存在不同的表中,這樣當使用者在需要調用的資料時,就不再需要花費大量時間去尋找資料了,隻要找到對應的表,就可以找到需要的資料了。MySQL可以完美的實作對于資料庫的基本操作。因為 MySQL 資料庫的占用的記憶體少,運作快,成本低,源代碼開放,可移植性強,是以越來越多的資料來源簡單的項目的開發都會選擇 MySQL作為資料庫,而MySQL也變得越來越流行。

2.3 微信開發者工具

        在傳統web浏覽器中,在加載htm15頁面時先加載視圖層的html和css,後加載邏輯層的java script,然後傳回資料并在浏覽器中展示頁面。而微信開發者工具的系統層是基于Native System的,視圖層和邏輯層會同時被加載。微信小程式的這種邏輯方式大大的優化了頁面響應速度,減少了頁面加載的等待時間,提高了使用者體驗。微信開發者工具可以實作同步本地檔案,開發調試,編譯預覽,上傳,釋出等一整套流程。

三、系統設計:

3.1 系統架構設計:

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

3.2 登入時序圖設計:

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

四、功能截圖: 

4.1 微信小程式端:

4.1.1登入注冊:

 本章主要介紹校園訂餐小程式的系統實作,根據系統的需求分析,系統設計,系統前台功能區和系統背景功能區的實作。通過以下系統運作界面和核心代碼展示。

        使用者登入,本系統和大部分系統一樣都需要登入才能進入系統進行後續操作,使用者輸入登入名和密碼,具體的實作效果如圖所示:

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

4.1.2 首頁資訊:

使用者登陸小程式端,可以對首頁、餐廳資訊、美食資訊、購物車、我的等功能進行詳細操作。

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

4.1.3 美食資訊:

在美食資訊頁面可以檢視美食名稱、美食類型、主料、圖檔、價格、口味、餐廳名稱、商家賬号、點選次數、庫存、美食介紹等資訊,并進行加入購物車,立即訂購,評論或收藏操作。

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

4.1.4 美食詳情:

        在美食資訊頁面可以檢視美食名稱、美食類型、主料、圖檔、價格、口味、餐廳名稱、商家賬号、點選次數、庫存、美食介紹等資訊,并進行加入購物車,立即訂購,評論或收藏操作。

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

4.1.5 購物車資訊:

在購物車頁面可以檢視美食名稱、圖檔、單價、數量、總價等資訊,并進行立即下單操作。

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

4.1.6 我的子產品: 

在我的頁面可以對個人中心、我的收藏管理、使用者充值、購物車、我的訂單等詳細資訊進行操作。

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

4.2 背景管理者端:

4.2.1 管理者登入:

系統背景登入,管理者和商家通過輸入使用者名、密碼,選擇角色并點選登入進行系統登入操作。

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

4.2.2 餐廳管理子產品:

在餐廳資訊管理頁面可以對索引、餐廳名稱、餐廳位址、人均消費、營業時間、餐廳圖檔、商家賬号、聯系電話、稽核回複、稽核狀态、稽核等内容進行詳情,檢視評論或删除操作。

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

4.2.3 美食管理子產品:

在美食資訊管理頁面可以對索引、美食名稱、美食類型、主料、口味、美食圖檔、餐廳名稱、商家賬号、價格、單限、庫存、稽核回複、稽核狀态、稽核等内容進行詳情,檢視評論或删除操作。

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

4.2.4美食資訊資訊:

在美食資訊頁面可以對索引、标題、圖檔等内容進行詳情,修改或删除等操作,還可以對輪播圖管理進行詳細操作。

基于Java+Vue+uniapp微信小程式實作餐廳校園訂餐平台

五、代碼實作:  

<script>
  export default {
    onLaunch: function() {
      console.log('App Launch')
    },
    onShow: function() {
      console.log('App Show')
    },
    onHide: function() {
      console.log('App Hide')
    }
  }
</script>

<style lang="scss">
  @import "/colorui/main.css";
  @import "/colorui/icon.css";
  /*每個頁面公共css */
  @import "/assets/css/style.scss";
  
  .uni-product-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 60px;
  }
</style>      
/**
 * 美食資訊
 * 後端接口
 * @author 
 * @email 
 * @date 2022-10-18 10:13:54
 */
@RestController
@RequestMapping("/meishixinxi")
public class MeishixinxiController {
    @Autowired
    private MeishixinxiService meishixinxiService;
    @Autowired
    private StoreupService storeupService;

       /**
     * 後端清單
     */
    @RequestMapping("/page")
    public R page(@RequestParam Map<String, Object> params,MeishixinxiEntity meishixinxi, 
        HttpServletRequest request){

        String tableName = request.getSession().getAttribute("tableName").toString();
        if(tableName.equals("shangjia")) {
            meishixinxi.setShangjiazhanghao((String)request.getSession().getAttribute("username"));
        }
        EntityWrapper<MeishixinxiEntity> ew = new EntityWrapper<MeishixinxiEntity>();
        PageUtils page = meishixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, meishixinxi), params), params));
        return R.ok().put("data", page);
    }
      

    /**
     * 清單
     */
    @RequestMapping("/lists")
    public R list( MeishixinxiEntity meishixinxi){
        EntityWrapper<MeishixinxiEntity> ew = new EntityWrapper<MeishixinxiEntity>();
        ew.allEq(MPUtil.allEQMapPre( meishixinxi, "meishixinxi")); 
        return R.ok().put("data", meishixinxiService.selectListView(ew));
    }
     /**
     * 查詢
     */
    @RequestMapping("/query")
    public R query(MeishixinxiEntity meishixinxi){
        EntityWrapper< MeishixinxiEntity> ew = new EntityWrapper< MeishixinxiEntity>();
        ew.allEq(MPUtil.allEQMapPre( meishixinxi, "meishixinxi")); 
        MeishixinxiView meishixinxiView =  meishixinxiService.selectView(ew);
        return R.ok("查詢美食資訊成功").put("data", meishixinxiView);
    }
       
    /**
     * 前端詳情
     */
    @IgnoreAuth
    @RequestMapping("/detail/{id}")
    public R detail(@PathVariable("id") Long id){
        MeishixinxiEntity meishixinxi = meishixinxiService.selectById(id);
        meishixinxi.setClicknum(meishixinxi.getClicknum()+1);
        meishixinxi.setClicktime(new Date());
        meishixinxiService.updateById(meishixinxi);
        return R.ok().put("data", meishixinxi);
    }
    

    /**
     * 贊或踩
     */
    @RequestMapping("/thumbsup/{id}")
    public R thumbsup(@PathVariable("id") String id,String type){
        MeishixinxiEntity meishixinxi = meishixinxiService.selectById(id);
        if(type.equals("1")) {
            meishixinxi.setThumbsupnum(meishixinxi.getThumbsupnum()+1);
        } else {
            meishixinxi.setCrazilynum(meishixinxi.getCrazilynum()+1);
        }
        meishixinxiService.updateById(meishixinxi);
        return R.ok();
    }
       /**
     * 前端儲存
     */
    @RequestMapping("/add")
    public R add(@RequestBody MeishixinxiEntity meishixinxi, HttpServletRequest request){
        meishixinxi.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
        meishixinxiService.insert(meishixinxi);
        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
    @Transactional
    public R update(@RequestBody MeishixinxiEntity meishixinxi, HttpServletRequest request){
        meishixinxiService.updateById(meishixinxi);//全部更新
        return R.ok();
    }
    
    /**
     * 删除
     */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] ids){
        meishixinxiService.deleteBatchIds(Arrays.asList(ids));
        return R.ok();
    }
       
    /**
     * 前端智能排序
     */
    @IgnoreAuth
    @RequestMapping("/autoSort")
    public R autoSort(@RequestParam Map<String, Object> params,MeishixinxiEntity meishixinxi, HttpServletRequest request,String pre){
        EntityWrapper<MeishixinxiEntity> ew = new EntityWrapper<MeishixinxiEntity>();
        Map<String, Object> newMap = new HashMap<String, Object>();
        Map<String, Object> param = new HashMap<String, Object>();
        Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
        while (it.hasNext()) {
            Map.Entry<String, Object> entry = it.next();
            String key = entry.getKey();
            String newKey = entry.getKey();
            if (pre.endsWith(".")) {
                newMap.put(pre + newKey, entry.getValue());
            } else if (StringUtils.isEmpty(pre)) {
                newMap.put(newKey, entry.getValue());
            } else {
                newMap.put(pre + "." + newKey, entry.getValue());
            }
        }
        params.put("sort", "clicknum");
                params.put("order", "desc");
        PageUtils page = meishixinxiService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, meishixinxi), params), params));
        return R.ok().put("data", page);
    }

}      
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <mvc:default-servlet-handler/>
  
    </mvc:annotation-driven>
    <!-- 靜态資源配置 -->
    <mvc:resources mapping="/resources/**" location="/resources/"/>
    <!-- 對模型視圖名稱的解析,即在模型視圖名稱添加前字尾 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/pages/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
    
    <!-- 攔截器配置 -->
    <mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/upload"/>
            <bean class="com.interceptor.AuthorizationInterceptor"/>
        </mvc:interceptor>
    </mvc:interceptors>

    <!-- 上傳限制 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 上傳檔案大小限制為300M,300*1024*1024 -->
        <property name="maxUploadSize" value="314572800"/>
    </bean>

</beans>      

六、論文文檔:

目  錄

​​目  錄 ​​

​​1緒論 ​​

​​1.1 課題研究的背景與意義 ​​

​​1.2 國内外研究現狀和發展趨勢 ​​

​​1.3 課題研究的内容 ​​

​​2 關鍵技術介紹 ​​

​​2.1 SSM架構 ​​

​​2.2 Java技術及架構介紹 ​​

​​2.3 MYSQL資料庫 ​​

​​2.4微信開發者工具 ​​

​​2.5 B/S架構 ​​

​​3 需求分析與可行性分析 ​​

​​3.1功能需求分析 ​​

​​3.2 性能需求分析 ​​

​​3.3系統設計規則與運作環境 ​​

​​3.4系統流程分析 ​​

​​3.5 可行性分析 ​​

​​4 系統設計 ​​

​​4.1軟體功能子產品設計 ​​

​​4.2登入注冊子產品 ​​

​​4.3資料庫設計 ​​

​​4.3.1 資料庫E/R圖 ​​

​​4.3.2 資料庫表 ​​

​​5系統實作 ​​

​​5.1微信小程式端子產品實作 ​​

​​5.2背景子產品 ​​

​​5.2.1管理者功能子產品 ​​

​​5.2.2商家功能子產品 ​​

​​6 系統測試 ​​

​​6.1 測試目标 ​​

​​6.2 測試步驟 ​​

​​7總結及展望 ​​

​​7.1 總結 ​​

​​7.2 展望 ​​