Warning: Undefined array key "wenan" in /www/wwwroot/suitangyanyi.com/jianzhan/app/show.php on line 46

Warning: Trying to access array offset on value of type null in /www/wwwroot/suitangyanyi.com/jianzhan/app/show.php on line 46
java vue前后端分离实例 webapivue开发前后端分离-隋唐演义故事网-

{site_name}

{site_name}

🌜 搜索

java vue前后端分离实例 webapivue开发前后端分离

▥ 𝄐 0
<br><blockquote> <p>前端技术栈&#xff1a;HTML&#43;CSS&#43;Ja【【微信】】&#43;Vue3 后端技术栈&#xff1a;JavaSE&#43;MySQL&#43;JDBC&#43;【【微信】】</p> </blockquote> <div> <ul><li>前言</li><li>1登录功能</li><li><ul><li>登录后端</li><li>登录前端</li></ul> </li><li>2商家管理</li><li><ul><li>查询商家</li><li><ul><li>查询商家后端</li><li>查询商家前端</li></ul> </li><li>增加商家</li><li><ul><li>增加商家后端</li><li>增加商家前端</li></ul> </li><li>删除商家</li><li><ul><li>删除商家后端</li><li>删除商家前端</li></ul> </li><li>修改商家</li><li><ul><li>修改商家后端</li><li>修改商家前端</li></ul> </li></ul> </li><li>3鞋子管理</li><li><ul><li>查询鞋子</li><li><ul><li>查询鞋子后端</li><li>查询鞋子前端</li></ul> </li><li>增加鞋子</li><li><ul><li>增加鞋子后端</li><li>增加鞋子前端</li></ul> </li><li>删除鞋子</li><li><ul><li>删除鞋子后端</li><li>删除鞋子前端</li></ul> </li><li>修改鞋子</li><li><ul><li>修改鞋子后端</li><li>修改鞋子前端</li></ul> </li></ul> </li></ul> </div> <p>本文项目或许不符合现实生活&#xff0c;无所谓&#xff0c;那是博主给自己做的笔记 如果认真的跟着敲了&#xff0c;发现有问题&#xff0c;欢迎私信或评论区讨论</p> <p>数据库和Dao层代码采用基于JavaSE的淘宝卖鞋后端管理系统的设计与实现</p> <p>【易错点】&#xff1a;的值要与postman后端匹配</p> <p>在这里实体类和数据库不再重复写</p> <p>一、dao包</p> <p>其实就是个查询&#xff0c;<strong>登录的查询关注的是查没查到</strong> &#xff0c;返回值是布尔类型</p> <p>二、service包的</p> <p>三、是controller包的</p> <p>1、继承 2、加注解&#xff0c;写路径 3、重新 方法</p> <p>后端写完后用Postman测试&#xff1a; </p> <p>新建一个前端项目&#xff0c;在创建时勾选上Router选项&#xff0c;因为有跳转 </p> <p>创建好项目后分别安装 框架、和框架</p> <p>在文件中导入一个css文件用于在页面中加图标</p> <p>同时还要加个路由守卫</p> <p>路由守卫目的是除了登录视图外&#xff0c;其他视图的访问必须是登录过的用户&#xff0c;如果未登录&#xff0c;则跳转到登录页&#xff1b; 如果已登录&#xff0c;则正常进行路由跳转。</p> <p>下一步清空项目中生成的无用代码和组件</p> <p>在根组件中只留一个路由出口</p> <p>在views文件夹中生成和两个视图</p> <p>下一步在文件中导入两个视图及路由配置</p> <p>在 中加点样式 style&#xff0c;让他撑满整个整个父标记</p> <p>在登录视图中&#xff1a;</p> <p>然后加点样式</p> <p>接下来在data 配置 v-model 的两个数据&#xff08;name和password&#xff09;</p> <p>完成绑定后后编写方法加在&#xff0c;用 login 发请求&#xff0c;发请求就要导包</p> <p>qs包是发送 get 请求&#xff0c;get 请求数据是拼接在地址里&#xff0c;所以暂不需要</p> <p>输入正确的用户名和密码后点击登录&#xff0c;在页面上方弹出提示框提示成功&#xff0c;否则是提示失败 如果显示成功要完成到首页的跳转&#xff0c;如果失败那就接着跳转</p> <p>【代码解释】&#xff1a; 当输入用户名和密码后&#xff0c;点击登录按钮&#xff0c;就会触发 函数。该函数使用 库发送一个 GET 请求到指定的 URL&#xff0c;其中包含用户名和密码&#xff0c;等待服务器响应。如果响应返回了“成功”&#xff0c;就将用户名存储在浏览器的 中&#xff0c;然后将用户重定向到“index”页面。如果响应返回其他内容&#xff0c;则表示登录失败&#xff0c;将清空用户名和密码&#xff0c;并将 设置为 &#xff0c;以便在界面上显示错误消息。</p> <p>首页视图代码&#xff1a;</p> <p>随后加上样式代码</p> <p>插值语法中是个 name&#xff0c;需要在中做个配置</p> <p>name 从会话存储中获取到的&#xff0c;需要写到挂载完成的钩子函数里面&#xff0c;挂载完毕取出会话里的数据赋值给 name</p> <p>随后登陆成功 </p> <blockquote> <p>对于后端增删改查这里只写&#xff08;按顺序&#xff09;dao、service、controller 查看代码注解</p> </blockquote> <p>这里查询方法名字的是 </p> <p>dao包&#xff1a;</p> <p>service包&#xff1a;</p> <p>对于查询、添加、修改有多个数据&#xff0c;这里写个dao类封装</p> <p>controller包&#xff1a;</p> <p>postman 测试&#xff1a; </p> <p>在前端视图文件夹下新建文件夹shop&#xff0c;在里面新建视图Shop【【微信】】</p> <p>首先在首页配置下加上查询商家的配置路由对象</p> <p>然后</p> <p>这里的方法用的是 </p> <p>dao包&#xff1a;</p> <p>service包&#xff1a;</p> <p>controller包&#xff1a;</p> <p>后端测试&#xff1a; </p> <p>首先在 index.js 中加上配置的子路由</p> <p>回到插入视图&#xff0c;在 methods 内 push 上地址&#xff1a;addshop</p> <p>然后新建视图 ShopAddView&#xff0c;在视图里加一些输入框</p> <p>这里的数据是跟controller类中的取数据的名字一致</p> <p>v-model 是绑定到一个对象里的几个属性</p> <p>在 data 中加入要添加的内容</p> <p>然后导入 qs 和 axios 框架&#xff0c;</p> <p>接下来在 methods 内编写 addshop 方法&#xff0c;这里的名字与前面添加按钮事件中名字一样</p> <p> 回答查询页面会发现多了条刚才添加的数据</p> <p>下面给添加商家加点样式&#xff0c;进行表单校验&#xff0c;检查添加的输入框是否为空。如果有任意一个输入框为空&#xff0c;则会展示相应的提示消息&#xff0c;同时不会发送请求。</p> <p>输出效果&#xff1a; </p> <p>删除方法用的是</p> <p>dao包下&#xff1a;</p> <p>service包&#xff1a;</p> <p>controller包&#xff1a;</p> <p>后端测试&#xff1a; </p> <p>在查询视图下</p> <p>接下来给删除商家功能加点小样式&#xff1a;当商家仍有商品在出售时&#xff0c;不可以删除</p> <p>首先在后端service包内&#xff0c;删除功能改成&#xff1a;</p> <p>先在食品表中查商家ID&#xff0c;然后到商家表中删商家ID</p> <p>dao包代码&#xff1a;</p> <p>controller包代码&#xff1a;</p> <p>前端代码&#xff1a;</p> <blockquote> <p>回头来写 </p> </blockquote> <p>方法用的是&#xff1a;</p> <p>dao层&#xff1a;</p> <p>service层&#xff1a;</p> <p>controller层&#xff1a;</p> <p>index.js文件夹下</p> <p>查询视图</p> <p>修改视图&#xff1a;ShopUpdateView</p> <p>首先在主页面视图中让他有个跳转</p> <p>在 index.js 文件中配置子路由</p> <p>这里是希望同一个查询按钮既能查到鞋子名字&#xff0c;又能查到他所属商家名字</p> <p>dao类代码&#xff1a;</p> <p>service代码&#xff1a;</p> <p>controller类代码&#xff1a;</p> <p>这里做了个下拉框显示商家名字&#xff0c;在点击新增按钮的时候&#xff0c;可以选择商家</p> <p>【【微信】】方法</p> <p>dao包&#xff1a;</p> <p>service包&#xff1a;</p> <p>controller包&#xff1a;</p> <p>之前查询的时候已经导入的 qs框架&#xff0c;所以这里不必重复 在查询视图下的 methods 内加上&#xff1a;【【微信】】方法</p> <p>新建【【微信】】视图&#xff0c;在 index.js文件内加上路由配置</p> <p>【【微信】】视图&#xff1a;</p> <p>【【微信】】 方法</p> <p>dao包代码&#xff1a;</p> <p>service包&#xff1a;</p> <p>controller包&#xff1a;</p> <p>在查询视图下加上 【【微信】】 方法&#xff08;在写查询时已经定义此方法&#xff09;</p> <p>用session方法修改</p> <p>dao 包代码&#xff1a;</p> <p>service 包代码&#xff1a;</p> <p>controller包代码&#xff1a;</p> <p>在查询页面中加上 方法</p> <p>新建视图&#xff1a;GoodsUpdateSessionView</p> <p>在 index.js 文件中配置路由</p> <p>修改视图页面&#xff1a;</p> <p>接下来可以改改样式</p> <br>..天猫助力次数,天猫助力次数,互助群微信免费加入2023吗,我加入了一个2023年天猫618 狂欢盛典群、互帮互助的618 年中大促2023最新互助微信群名称大全,你愿意一起加入吗?