HTTP API和RESTFul API

• RESTFul API 这一种设计风格
• 依据情况，灵活处理

前端介绍

前端APP启动步骤

• 安装node.js
• 配置环境变量，便于随处调用npm
• 如果是 windows 系统，请将./package.json里面的NODE_ENV=dev全部修改为set NODE_ENV=dev
• 运行程序

`npm install`//第一次安装时才用
`npm run mock` 改为 大概是可以后台模式运行start /b npm run mock
set NODE_ENV=dev
`npm start`

npm install说明:大概就是根据文件下的package.js安装项目的依赖包，感觉和maven类似
注：直接npm run mock出现的错误：

• 启动出错.PNG
  另外，所有的后端接口地址，都可以在./mock/server.js中查看
  在Windows的cmd窗口下进入
  注：启动后无法加载首页的图片问题：大概是由于网络安全的问题，设置了禁止访问
  图片无法访问403.PNG
  在react-dianping-new/app/index.tmpl.html中的头部加入,

<meta name="referrer" content="no-referrer"/>

• 403解决.PNG
  

  ctrl+s保存，然后刷新页面：

  
  解决.PNG

后台项目环境搭建

修改指向地址

数据库设计

• Ad 和数据库的表对应,AdDto继承Ad
  怎么生成Ad 的javabean

select column_name from information_schema.`COLUMNS` where table_schema='comment'
and table_name='ad'

结果：(利用工具将下列结果多行批量操作)
id
img_file_name
link
title
weight

Service层图片上传功能

图片服务器.PNG
如何设置图片访问路径？
将图片上传路径与访问路径设置为tomcat根路径下的路径
出现的问题：

• 1.将图片文件放在tomcat的根路径下，在利用startup.bat启动时可以打开静态资源，然而用idea启动时则会404，无法访问静态资源。解决办法：Edit Configuration->Deployment-> + ->external source -> 选择tomcat安装目录下的webapps(当然，这一步视情况而定，看静态资源放在哪)
  具体原因：我们的项目的工程输出目录在我们指定的目录下，而不是在安装的tomcat的Apache-tomcat的webapps的目录下。IDEA在“项目目录\out\artifacts”下虚拟了一个Tomcat，而在该目录下没有我们实际安装的Tomcat工程。而此时并没有把Tomcat的工程部署到服务器，所以就访问不到Tomcat首页，而访问到的是我们项目里的其他页面信息。(参考的是这篇博文)
• 2.端口占用问题：当8080端口被占用时，若tomcat的启动端口认为默认的8080，则会报初始化异常
  返回码的处理：PageCodeEnum,枚举类型的构造器自动为private
  分页标签封装：
• 自定义标签

<%@ tag language="java" pageEncoding="UTF-8" %>
<%@ attribute type="org.imooc.bean.Page" name="page" required="true" %>
<%@ attribute type="String" name="jsMethodName" required="true" %>

<script type="text/javascript">
    function transCurrentPage(currentPage) {
        var rule = /^[0-9]*[1-9][0-9]*$/;
        if(!rule.test(currentPage)) {
            currentPage = 1;
        }
        eval("${jsMethodName}(currentPage)");
    }
</script>

<div class="page fix">
    <a href="javascript:transCurrentPage('1');" class="first">首页</a>
    <a href="javascript:transCurrentPage('${page.currentPage - 1}');" class="pre">上一页</a>
    当前第<span>${page.currentPage}/${page.totalPage}</span>页
    <a href="javascript:transCurrentPage('${page.currentPage + 1}');" class="next">下一页</a>
    <a href="javascript:transCurrentPage('${page.totalPage}');" class="last">末页</a>
    跳至 &nbsp;<input id="currentPageText" value="1" class="allInput w28" type="text"/>&nbsp;页 &nbsp;
    <a href="javascript:transCurrentPage($('#currentPageText').val());" class="go">GO</a>
</div>

在adList.jsp头部引入：

<%@ taglib prefix="t" tagdir="/WEB-INF/tags"%>

广告接口开发：
数据绑定梳理总结：
对于请求参数Long id,不加@RequestParam行吗？

不行.不加@RequestParam之所以可以是因为编译器做了处理，但是发布环境不一致，就会导致不可用，所以要加@RequestParam

• 数据绑定.PNG
  

  修改功能和表单校验

• 页面展示不一样
• 图片上传功能可以上传，可以不上传
• 根据修改的条数判断修改是否正确
• 删除图片的动作在保存图片之后再做，若保存新图片失败，旧图也没有造成数据的丢失
  jquery-validation 表单校验

Dao层

Service层

Controller层