精华内容
下载资源
问答
  • 基于JAVA的WEB应用开发实训教程.doc
  • 基于JAVA的WEB应用开发实训教程 基于JAVA的WEB应用开发实训教程
  • 实训总结 这学期将要结束在最后的 WEB 实训的这三周中我弄懂了许 多在上课中不曾理解的东西 比如如何连接数据库 如何将用户控件 绑定数据库如何编写后台代码我认为这三周的实训对我来说是 及其重要的它让我巩固了这...
  • 精品文档 实训总结 这学期将要结束在最后的 WEB实训的这三周中我弄懂了许 多在上课中不曾理解的东西比如如何连接数据库如何将用户控件 绑定数据库如何编写后台代码我认为这三周的实训对我来说是 及其重要的它让我...
  • JAVA的WEB应用开发学习资料,还不错
  • 实训运用ASP.NET技术,采用三层开发模式来开发一个论文比赛支持网站。
  • PAGE PAGE 1 江苏海事职业技术学院 信息工程 学院 Java Web应用开发实训课程 指导书与任务书 课程编号: 周数/学分: 二周 先修课程: JAVA程序设计 数据库原理及应用, Java Web应用开发 适用专业: 软件技术专业 撰写者...
  • 《物联网工程专业WEB应用开发实训指导书 《物联网工程专业WEB应用开发实训指导书
  • 链接: WEB应用开发综合实训day13. 文章目录歌曲播放歌曲暂停或播放进度条专辑列表 歌曲播放 const innerAudioContext = wx.createInnerAudioContext(); innerAudioContext.autoplay = true innerAudioContext.src...

    本节实训内容为微信小程序wx.createInnerAudioContext(Object object)播放、暂停音乐功能,小程序专辑列表页。项目地址和微信小程序二维码和昨天一样
    链接: WEB应用开发综合实训day13.

    • 歌曲播放

      const innerAudioContext = wx.createInnerAudioContext();
      innerAudioContext.autoplay = true
      innerAudioContext.src = that.data.baseUrl+that.data.song.mPath;
      
    • 歌曲暂停或播放

      /**
         * 暂停或播放
         */
      pauseOrPlay:function(){
          //获取当前歌曲的状态
          var state = this.data.state;
          if(state=='play'){
              //改为暂停
              this.setData({
                  //修改状态
                  state:"pause"
              })
              //暂停歌曲
              innerAudioContext.pause()
          }else{
              //改为暂停
              this.setData({
                  //修改状态
                  state:"play"
              })
              //暂停歌曲
              innerAudioContext.play()
          }
      },
      
    • 进度条

      /**
         * 拖拽进度条
         */
      dragSlider:function(e){
          //当前进度
          var currentTime = e.detail.value;
          //修改歌曲的当前进度
          innerAudioContext.seek(currentTime);
      },
      /**
         * 进度条改变
      */
      changeSlider:function(currentTime,duration){
          //1. 将总时长和当前进度换算成分秒格式
          var endMinute = Math.floor(duration/60);
          var endSeconds = Math.floor(duration%60);
          var playMinutes = Math.floor(currentTime/60);
          var playSeconds = Math.floor(currentTime%60);
          //2. 调整格式
          endMinute = endMinute<10?"0"+endMinute:endMinute;
          endSeconds = endSeconds<10?"0"+endSeconds:endSeconds;
          playMinutes = playMinutes<10?"0"+playMinutes:playMinutes;
          playSeconds = playSeconds<10?"0"+playSeconds:playSeconds;
          this.setData({
              duration:duration,
              move:currentTime,
              playTime:playMinutes+":"+playSeconds,
              endTime:endMinute+":"+endSeconds
          })
      },
      
    • 专辑列表

      /**
         * 生命周期函数--监听页面加载
         */
      onLoad: function (options) {
          this.getAlbumList()
      },
      /**
         * 获取专辑列表
      */
      getAlbumList:function(){
          var that = this;
          wx.request({
              url: this.data.baseUrl+'wx/album/list',
              success:function(res){
                  that.setData({
                      albumList:res.data.data
                  })
              }
          })
      },
      
    展开全文
  • 本节实训内容为Spring Web Mvc框架、表单提交、JSON数据转换器 文章目录新建maven-archetype-webapp项目导入SpringMvc依赖配置web.xml创建项目目录配置tomcat运行项目配置spring-mvc.xmlWEB-INF文件夹 新建maven-...

    本节实训内容为Spring Web Mvc框架、表单提交、JSON数据转换器

    新建maven-archetype-webapp项目

    不要选择前两天的quickstart项目
    在这里插入图片描述

    导入SpringMvc依赖

    pom.xml

    <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.3.18.RELEASE</version>
    </dependency>
    

    配置web.xml

    web.xml是web项目的核心配置文件,当tomcat服务器启动时,会先加载web.xml配置文件的内容,dispatchServlet:前端中转控制器,将前端请求对应的路径与后端controller中对应的映射匹配
    所以我们需要在web.xml中配置dispatchServlet,并且加载spring-mvc.xml

    web.xml

    <web-app>
      <display-name>Archetype Created Web Application</display-name>
      <!--配置中转控制器 dispatchservlet-->
      <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet
          </servlet-class>
        <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:spring-mvc.xml</param-value>
        </init-param>
      </servlet>
      <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
      </servlet-mapping>
    </web-app>
    

    创建项目目录

    在src/main目录下新建java和resources两个目录并把resources给mark一下
    完整项目目录结构如下
    在这里插入图片描述

    配置tomcat

    tomcat8.0下载链接:https://pan.baidu.com/s/1AjWr8AO9Im1xYjdYau09Cg
    提取码:8888

    下载tomcat后解压
    在这里插入图片描述
    点击Configure…选中tomcat文件夹路径,按下图红框进行配置
    在这里插入图片描述
    在这里插入图片描述
    选择Deployment,点击+出现Artifact,选择exploded即可
    如果没有Artifact就检查pom.xml文件和项目是否为webapp项目
    在这里插入图片描述

    运行项目

    在这里插入图片描述

    配置spring-mvc.xml

    在resources目录下新建一个spring-mvc.xml文件
    spring-mvc.xml

    <?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"
           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">
    
       <context:component-scan base-package="com.qianfeng.controller">
        </context:component-scan>
    </beans>
    

    UserController.java

    @Controller
    public class UserController {
    
        //定义后台映射 hello
        @RequestMapping("/hello")  // 返回的String都是页面
        public String hello(){
            System.out.println("hello .....");
            return "index.jsp";
        }
    }
    

    浏览器输入:localhost:8080/hello可以看见IDEA打印出hello…
    注意每次修改后端代码都必须重启IDEA

    WEB-INF文件夹

    WEB-INF文件夹中的文件都不能被前端直接访问,只能通过后端返回前端视图页面控制,才能访问,好处是页面请求与访问都由后端控制

    可以通过配置视图解析器来配置返回页面的前缀后缀

    <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"
           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">
    
       <context:component-scan base-package="com.qianfeng.controller"></context:component-scan>
       <!--配置视图解析器,配置前缀后缀-->
       <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
          <property name="prefix" value="/WEB-INF/"></property>
          <property name="suffix" value=".jsp"></property>
       </bean>
    </beans>
    

    代码这么写

    @RequestMapping("/helloworld")
    public String helloworld(){
        System.out.println("hello world");
        return "helloworld";//配置了视图解析器,加了前缀后缀,实际还是helloworld.jsp页面
    }
    @RequestMapping("/hello")
    public String hello(){
        System.out.println("hello");
        return "hello";
    }
    

    路径最前面加/ :表示从服务器根路径开始找

    @Controller
    @RequestMapping("/user")
    public class UserController {
        //定义后台映射 hello
        @RequestMapping("/index")
        public String index(){
            System.out.println("index .....");
            return "/index.jsp";// 返回的String都是页面
        }
    
        @RequestMapping("/hello")
        public String hello(){
            System.out.println("hello");
            return "/WEB-INF/hello.jsp";//添加 / 都表示从服务器根路径开始找
        }
    }
    

    有复合路径存在的时候,不加会报错

    访问html等其他非jsp文件报错404的问题

    原因:tomcat有一个缺省的servlet,专门用来处理jsp,所以没有把jsp交给dispatchServlet处理,但是html css 图片 js等静态资源没有这样的servlet,所以交给了dispatchServlet处理,那么会去后端controller找对应的映射,因此报404
    解决办法:我们把html css 等静态资源交给defaultServlet来处理

    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.jpg</url-pattern>
    </servlet-mapping>
    

    注意:上面方法虽然可行,但是文件如果类型过多,配置起来很麻烦,所以我们会交给spring-mvc.xml来解决问题

    <!--释放静态资源-->
    <mvc:default-servlet-handler/>
    <!--注解驱动标签,将前端请求与后端controller中的映射匹配-->
    <mvc:annotation-driven/>
    

    提交表单数据,SpringMvc接收

    前端pages/user_form.html

    <form action="/xixi/user/user_form" method="get">
        用户名: <input type="text" name="userName"> <br>
        <!--table>tr*3>td*3按tab-->
        密码: <input type="password" name="userPass"><br>
        年龄: <input type="text" name="userAge"> <br>
        <input type="submit" value="提交">
    </form>
    

    后端

    @Controller
    @RequestMapping("/user")
    public class UserController {
    
        /**
         * 接收前端表单提交的数据
         * springmvc优势:1. 直接根据前端输入框的name值接收(跟name一样)
         *                2. 直接使用实体类接收(实体类的属性名跟input的name一致)
         */
        @RequestMapping("/user_form")
    //    public String userForm(String userName,String userPass,Integer userAge){
        public String userForm(User user){
            System.out.println(user);
            System.out.println("user form....");
            return "/success.html";
        }
    }
    

    POST提交造成中文乱码,需要配置过滤器来解决

    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    

    JSON数据

    前后端通用的数据格式
    后端返回用户列表:  List<User>---->转换成json格式数据(前端才能拿来使用)
    
    var student = {name:"张三",age:25}
    

    Fastjson转换器

    后端返回字符串

    @Controller
    @RequestMapping("/json")
    public class JsonController {
    
        @RequestMapping("/str")
        @ResponseBody //加上之后,返回字符串或者json数据
        public String str(){
            return "helloworld";
        }
    }
    
    • 添加@ResponseBody注解,就不再返回页面,而是json数据或者字符串

    后端返回User对象,结果报错了,因为需要json转换器

    导入fastjson转换器(阿里巴巴)

    <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.62</version>
    </dependency>
    

    修改spring-mvc.xml的配置

    <!--注解驱动标签,将前端请求与后端controller中的映射匹配-->
    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>application/json;charset=utf-8</value>
                        <!--避免版本较低的ie浏览器返回json数据出现下载文件的情况-->
                        <value>text/html;charset=utf-8</value>
                    </list>
                </property>
                <property name="features">
                    <list>
                        <value>WriteNullNumberAsZero</value>
                        <value>WriteNullStringAsEmpty</value>
                        <value>WriteNullListAsEmpty</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    

    代码测试

    package com.qianfeng.controller;
    
    import com.qianfeng.bean.User;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.ArrayList;
    import java.util.List;
    
    @Controller
    @RequestMapping("/json")
    public class JsonController {
    
        @RequestMapping("/str")
        @ResponseBody
        public String str(){
            return "helloworld";
        }
    
        @RequestMapping("/obj")
        @ResponseBody
        public User obj(){
            User user = new User();
            user.setUserName("张三");
    //        user.setUserPass("1234");
    //        user.setUserAge(21);
            return user;
        }
    
        @RequestMapping("/list")
        @ResponseBody
        public List<User> list(){
            List<User> users = new ArrayList<>();
            User user = new User();
            user.setUserName("张三");
            User user1 = new User();
            user1.setUserName("李四");
            user1.setUserPass("123456");
            user1.setUserAge(21);
            users.add(user);
            users.add(user1);
            return users;
    
        }
    }
    
    

    测试结果

    在这里插入图片描述

    展开全文
  • web应用系统开发实训任务

    千次阅读 2018-06-10 18:16:17
    请根据上述项目背景描述进行上机操作,完成Web应用系统的开发任务。 任务一    在数据库管理系统MySql中创建社区幼儿学校管理系统的数据库db_ks,并按照以下数据库设计创建出所有的数据库表。 社区幼儿医院管理系统...

    项目描述:

    随着家长对孩子教育的日渐重视,社区幼儿学校在国内逐渐兴起,对社区幼儿学校的信息化管理成为迫切需求。社区幼儿学校管理系统需要实现以下功能:

    1)  教师管理:实现对教师信息的查询、删除、增加(姓名、所教课程)

    2)  家长管理:实现对家长信息的查询、删除、增加(姓名、电话、地址)

    3)  幼儿管理:实现对幼儿信息的查询、删除、增加(姓名、生日、照片)

    4)  上课管理:实现对上课信息的查询、增加(上课时间、内容、效果)

    请根据上述项目背景描述进行上机操作,完成Web应用系统的开发任务。

    任务一                         

        在数据库管理系统MySql中创建社区幼儿学校管理系统的数据库db_ks,并按照以下数据库设计创建出所有的数据库表。

    社区幼儿医院管理系统的数据库设计如表1-1至1-6所示:


    表1-1 用户表t_user

    列名

    类型

    是否主键

    允许

    为空

    是否

    自增长

    描述

    id

    int

    用户id

    role

    varchar(45)

    角色(admin系统管理员、parents家长)

    name

    varchar(45)

    用户名

    pwd

    varchar(45)

    密码

    tel

    varchar(45)

    电话

    address

    varchar(256)

    地址


    表1-2 教师表t_teacher

    列名

    类型

    是否主键

     

    允许

    为空

    是否

    自增长

    描述

    id

    int

     

    教师id

    name

    varchar(45)

     

    教师名


    表1-3 课程表t_course

    列名

    类型

    是否主键

    允许

    为空

    是否

    自增长

    描述

    id

    int

    课程id

    name

    varchar(45)

    课程名

    desc

    varchar(256)

    课程描述


    表1-4 教师课程关系表t_teacher_course

    列名

    类型

    是否主键

    允许

    为空

    是否

    自增长

    描述

    teacherId

    int

    教师id

    courseId

    int

    课程id


    表1-5 幼儿表t_kid

    列名

    类型

    是否主键

    允许

    为空

    是否

    自增长

    描述

    id

    int

    幼儿id

    name

    varchar(45)

    幼儿名

    birthdate

    varchar(45)

    生日

    photo

    varchar(128)

    照片

    parentsId

    int

    家长id(t_user表主键)


    表1-6 上课表t_teaching

    列名

    类型

    是否主键

    允许

    为空

    是否

    自增长

    描述

    id

    int

    用户id

    kidId

    int

    幼儿Id

    teacherId

    int

    教师Id

    teachDate

    varchar(45)

    上课时间

    content

    text

    上课内容

    effect

    text

    上课效果

    任务二

    实现用户登录功能的开发任务,在页面输入用户名、密码、验证码后,点击【登录】按钮,能自动提交用户登录验证请求,验证成功后自动跳转到教师管理页面

    1 使用IntelliJ IDEA新建一个Web Application项目,项目命名为KidSchool

    操作说明:

    1)启动IntelliJIDEA到欢迎界面          

    2)选择Create NewProject,在弹出的NewProject窗口中,左侧栏选中默认的Java,右侧栏Additional Libraries and Framework中选中Web Application

    3)点击next按钮,在Project name输入项目名KidSchool后点击Finish按钮

    2在项目源码web目录下的用户登录页面index.jsp,实现用户登录页面的jsp代码在项目源码web目录下添加样式表文件styles.css,web目录下新建一个inc目录,并在inc目录下添加页头文件header.inc和页脚文件footer.inc

    操作说明:

    1)在右侧项目资源视图中,选择web目录的默认登录页面index.jsp,编写实现该页面的JSP代码

    2)在右侧项目资源视图中,选择web目录,选择右键菜单New,选择StyleSheet创建样式表文件styles.css,再选择File创建普通文件header.inc和footer.inc,编写以上新创建文件的代码

     

    3在项目源码src目录下创建包ks.po,在该包中新建用户类User,并实现用户类的java代码

    操作说明:

    1)在右侧项目资源视图中,选择src目录,选择右键菜单New,选择Package创建包名ks.po

    2)再在ks.po包下创建类名User,编写其java代码

    4在项目源码src目录下创建包ks.dao,在该包中新建用户数据访问类UserDAO,并在用户数据访问类中,实现与用户验证相关的java代码

    操作说明:

    1)在右侧项目资源视图中,选择src目录,选择右键菜单New,选择菜单Package创建包名ks.dao

    2)再选择ks. dao包,选择右键菜单New,选择菜单Java Class创建类名UserDAO,编写其java代码

    5在项目源码src目录下创建包ks.utils,在该包中新建验证码类CheckCode(继承HttpServlet类),实现验证码类的java代码

    操作说明:

    1)在右侧项目资源视图中,选择src目录,选择右键菜单New,选择菜单Package创建包名ks. utils

    2)再选择ks. utils包,选择右键菜单New,选择菜单Java Class创建类名CheckCode,编写其java代码

    6在项目源码src目录下创建包ks.servlet,在该包中新建用户登录功能的LoginServlet,实现处理用户登录验证请求的java代码

    操作说明:

    1)在右侧项目资源视图中,选择src目录,选择右键菜单New,选择菜单Package创建包名ks. servlet

    2)再选择ks. servlet包,选择右键菜单New,选择菜单Servlet,创建类名LoginServlet,编写其java代码

     

    任务三

    实现教师管理功能页面的开发任务,包括:

    1)  查询教师:在指定页面实现根据教师姓名查询教师信息

    2)  删除教师:在指定页面实现删除某条显示的教师记录

    3)  增加教师:在指定页面实现增加教师,并为该教师分配所教的课程

    4)  增加课程:在指定页面实现增加课程

    1在项目源码目录的src.ks.po包中新建课程类Course,并实现课程类的java代码

    操作说明:

    1)在项目源码src目录下选择包src.ks.po,再选择右键菜单New,选择菜单Java Class,创建类名Course,编写其java代码

    2在项目源码目录的src.ks.po包中新建教师类Teacher,并实现教师类的java代码

    操作说明:

    1)在项目源码src目录下选择包src.ks.po,再选择右键菜单New,选择菜单Java Class,创建类名Teacher,编写其java代码

    3 在项目源码web目录下新建“教师查询”页面teacherSearch.jsp,实现教师查询页面的jsp代码

    操作说明:

    1)在项目源码web目录下,选择右键菜单New,选择菜单JSP,创建JSP页面名teacherSearch.jsp,编写其JSP代码

    4在项目源码web目录下新建“教师查询结果”页面teacherSearchResult.jsp,实现教师查询结果页面的jsp代码

    操作说明:

    1)在项目源码web目录下,选择右键菜单New,选择菜单JSP,创建JSP页面名teacherSearchResult.jsp,编写其JSP代码

    5在项目源码web目录下新建“新教师信息录入”页面teacherAdd.jsp,实现新教师信息录入页面的jsp代码

    操作说明:

    1)在项目源码web目录下,选择右键菜单New,选择菜单JSP,创建JSP页面名teacherAdd.jsp,编写其JSP代码

    6在项目源码web目录下新建“新课程信息录入”页面courseAdd.jsp,实现新课程信息录入页面的jsp代码

    操作说明:

    1)在项目源码web目录下,选择右键菜单New,选择菜单JSP,创建JSP页面名courseAdd.jsp,编写其JSP代码

    7在项目源码目录的src.ks.dao包中,新建课程数据访问类CourseDAO,并在课程数据访问类中,实现与查询、增加课程相关的java代码

    操作说明:

    1)在项目源码src.ks.dao包目录下,选择右键菜单New,选择菜单Java Class,创建Java类名CourseDAO,编写其java代码

    8在项目源码目录的src.ks.dao包中,新建教师数据访问类TeacherDAO,并在教师数据访问类中,实现与查询、删除、增加教师相关的java代码

    操作说明:

    1)在项目源码src.ks.dao包目录下,选择右键菜单New,选择菜单Java Class,创建Java类名TeacherDAO,编写其java代码

    9在项目源码目录的src.ks.servlet包中,新建教师管理功能的TeacherServlet,实现处理与查询、增加、删除教师,以及查询、增加专业相关的java代码

    操作说明:

    1)在项目源码src.ks. servlet包目录下,选择右键菜单New,选择菜单Servlet,创建Servlet类名TeacherServlet,编写其java代码

    展开全文
  • /** * 上传歌单图片 */ takePhoto:function(){ var that = this wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album'...},
  • /** * 根据id获取详情(为了偷懒不返回ResultVo格式了,直接返回TbMusic格式) */ @RequestMapping("/detail") public TbMusic detail(Integer id){ return musicService.getMusicById(id);...
  • /* px是物理像素,不同的终端大小都是固定的 在小程序中布局尽量使用rpx:根据屏幕的大小自适应取值 iphone5: 1rpx = 0.42px iphone6: 1rpx = 0.5px */
  • table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值" // console.log(obj.value); //得到修改后的值 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,046
精华内容 3,218
关键字:

web应用开发实训