鸿蒙菜谱APP前端后端版本 大作业 毕设参考 实战学习

鸿蒙菜谱APP 前端 后端学习 大作业 毕设 项目实战参考

项目需求说明

使用deveco studio开发一个鸿蒙APP，能够实现前端和后端进行交互，能够动态实现数据的存储，菜谱APP是当下流行的APP，通过菜谱APP可以分享自己的菜谱，同时也可以进行AI智能对话，后端可以管理菜谱的发布，可以管理用户，前端可以注册用户信息，前端可以查看菜谱的信息。前后端分离的项目。

使用人员

学生学习参考，开发人员实战学习

开发环境

鸿蒙前端开发工具 【dev eco studio】
开发框架语句 【ArkUI TypeScript】
app运行工具 【鸿蒙模拟器】

后端环境：
后端java代码开发工具 【idea】
后端框架 【SpringBoot+MyBatis/MyBatisPlus 】
后端项目构建工具 【maven构建】

数据存储 ：【mysql】

项目效果实现图

登录效果

登录实现代码:

//  登录的异步方法
  async clickLogin(){

    if(!this.isChecked){
      showMsg('请勾选隐私协议之后,在进行登录操作')
      return
    }

    if(this.username==''||this.password==''){
      showMsg('账号或者密码不能为空')
    }else{
      this.user.username = this.username
      this.user.password = this.password
      await axios.post(loginUrl,this.user,{headers:{
        'Content-Type':'application/json'
      }})
        .then(async (response: AxiosResponse) => {
          // 获取到的数据赋值给users数组

          if(response.data.isSuccess) {
            this.user = response.data.user
            //   //存储登录的信息
              let user:USERINFO = this.user
              let context = getContext(this)
              await putData('username',user.username,context)
              await putData('email',user.email,context)
            showMsg('登录成功')
            setTimeout(() => {
              router.replace({ url: 'pages/TabsPage' }
              )
            }, 1000)
          }else{
            showMsg('用户名或者密码错误')
          }
        })
        .catch((error: AxiosError) => {
          showMsg('登录失败')

        })
        .then(()=> {
          // 总是会执行
        });

    }
  }

登陆页面构建

build() {
    Column(){
        Image($r('app.media.logo'))
          .width(100)
          .height(100)
          .margin({top:20})
      TextInput({
        placeholder:'请输入账号',text:this.username
      })
        .placeholderColor('#666')
        .height(40)
        .borderRadius(20)
        .backgroundColor('#fff')
        .margin({top:100})
        .onChange((value)=>{this.username=value})

        TextInput({
          placeholder:'请输入密码',text:this.password
        })
          .placeholderColor('#666')
          .height(40)
          .borderRadius(20)
          .backgroundColor('#fff')
          .margin({top:20})
          .type(InputType.Password)
          .onChange((value)=>{this.password=value})

       Row(){
          Checkbox()
            .width(10)
            .margin({top:7})
            .onChange((value: boolean) => {
                this.isChecked = value
            })
          Text() {
            Span('我已经阅读并同意')
            Span('《系统隐私政策》  ').fontColor('#3274f6')
            Span('《系统用户服务协议》').fontColor('#3274f6')
            Span('未注册的手机号码将自动注册未系统账号')
          }
           .fontSize(12)
           .fontColor('#666')
           .lineHeight(20)
       }.alignItems(VerticalAlign.Top)
        .margin({top:20})

       Button('登录')
         .width('100%')
         .backgroundColor('#bf2838')
         .margin({top:25})
         .onClick(()=>{
           this.clickLogin()
         })

       Row({space:115}){
          Text('新用户注册').fontSize(14).fontColor('#666')
            .onClick(()=>{
              router.replaceUrl({
                url:'pages/Reg'
              })
            })
          Text('忘记密码').fontSize(14).fontColor('#666')
       }
       .margin({top:15})
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.bg'))
    .backgroundImageSize(ImageSize.Cover)
  }
}

注册效果图

菜谱首页

菜谱详情页面

AI智能问答

个人中心

后端web 系统菜谱发布管理

后端菜谱删除代码

function del(id){
    //发送ajax请求删除数据
    $.get("/food/deleteFood",{"id":id},function(res){
        if(res.isSuccess){
            utils.$msg('删除成功','orange');
            $("#foodTable").bootstrapTable('refresh')
        }
    });
}

后端菜谱表格搜索功能代码

 search:function(){
            var foodName = $("#q_foodName").val();
            var queryparam = {
                silent:true,
                query:{
                    foodName:foodName
                }
            };
            $('#foodTable').bootstrapTable('refresh',queryparam);

        },

数据库表设计

t_food 是菜谱表
t_menu 是后端菜单表
t_permission是权限表
t_role是角色表
t_role_permission是角色权限表
t_user是用户表
t_user_role是用户角色表

代码获取

项目全部代码 sx 博主 ，项目安装部署运行，项目可以讲解说明