第一个Test Movies MVC 作业+web 1.0+web 2.0+ web 3.0

传统的web1.0

entity层

package com.nf.entity;

public class Movies {
    private  Integer id;
    private  String name;
    private  int boxOffice;

    @Override
    public String toString() {
        return "Movies{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", boxOffice=" + boxOffice +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getBoxOffice() {
        return boxOffice;
    }

    public void setBoxOffice(int boxOffice) {
        this.boxOffice = boxOffice;
    }
}

dao层

package com.nf.dao;

import com.nf.entity.Movies;

import java.util.List;

public interface MoviesMapper {
    public List<Movies> getMoviesList();

}

service层

1、MoviesService

package com.nf.service;

import com.nf.entity.Movies;

import java.util.List;

public interface MoviesService {
    public List<Movies> getMoviesList();

}

2、MoviesServiceImpl

package com.nf.service;

import com.nf.dao.MoviesMapper;
import com.nf.entity.Movies;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
public class MoviesServiceImpl implements MoviesService {

    @Autowired
    private MoviesMapper moviesMapper;

    @Transactional
    public List<Movies> getMoviesList() {
        return moviesMapper.getMoviesList();
    }
}

action层

package com.nf.action;
import com.nf.entity.Movies;
import com.nf.service.MoviesService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
public class MoviesAction {

    @Autowired
    private MoviesService moviesService;

    @RequestMapping("/getAllMovies")
    public String getAllMovies(Model model){
        List<Movies> moviesList =moviesService.getMoviesList();
        model.addAttribute("moviesList",moviesList);
        return "Movies1";
    }

    //     这个使用的json 2.0
    @ResponseBody
    @RequestMapping("/getAllMovies2")
     public List<Movies> getAllMovies2(){
        List<Movies> movies=moviesService.getMoviesList();
        return movies;
     }

    //    测试 json 后台输出 2.0 连接test.js
    // jsp/html 使用 jquery 的ajax 获取数据动态生成界面
    @RequestMapping("/test")
    public String test(){
//        这个返回的是 test.js 文件
        return "test";
    }

}

Movies1.jsp

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>>
<html>
<head>
    <title>web 01</title>
</head>
<body>
这是web 01版本 电影排版<br>
<c:forEach items="${moviesList}" var="m">
    ${m.id}  ${m.name} ${m.boxOffice}<br>
</c:forEach>

</body>
</html>

test.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>wen 2.0</title>
    <%--<script lang="javascript" src="js/jquery.min.js"></script>--%>
    <script lang="javascript" src="js/jquery.min.js"></script>
</head>
<body>

测试
<script>
    $(function () {
        var myHtml="";
        var myHtml2="<table border='1px,solid pink'><tr><td>ID</td><td>名称</td><td>房价</td></tr>"
        $.ajax({
            url: 'getAllMovies2',//获取这个路径的数据
            data:null,
            type:'POST',
            dataType:'JSON',
            success:function (myjson) {
              // alert(myjson);
                $("#mydiv").text(myjson[1].name)+"<br>";

                $(myjson).each(function (index,file) {
                    myHtml=myHtml+" 第 "+index+" 条记录 "+"\n"+file.name+" \n"+file.boxOffice+"<br>";
                });

                $("#mydiv").html(myHtml);


                $(myjson).each(function (index,file) {
                    myHtml2=myHtml2 +"<tr><td>"+file.id+"</td><td>"+file.name+"</td><td>"+file.boxOffice+"</td></tr>"
                });

                myHtml2= myHtml2+'</table>';
                $("#mydiv2").html(myHtml2);

            },
            error:function () {
                alert('服务繁忙，请不要招呼程序员')
            },
            timeout:3000

        });
    })
</script>

<div id="mydiv" style="background-color: pink"></div>

<div id="mydiv2" style="background-color: aquamarine"></div>
</body>
</html>

Web 3.0 react-native方法

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button,FlatList} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            moviesList:[{id:1,name:'哈哈'},{id:2,name:'演示'}],
            ha:null
        };
    }
    render() {
        let a = null;
        let a2 = null;

        for (var j =0;j<this.state.moviesList.length;j++){
            // alert(this.state.moviesList[j].name);
            a= a+this.state.moviesList[j].name ;
            a2= a2+this.state.moviesList[j].boxOffice;
        }
    return (
      <View style={styles.container}>
        <Text>{this.state.moviesList[0].name} </Text>

          <Button title={"点击我"} onPress={this.miQ}/>
          <View style={{flex:1}}>
              <View><Text>{a}</Text></View>
          </View>

          <FlatList
              data={this.state.moviesList}
              renderItem={this._renderItem}
              keyExtractor={this._keyExtractor}
              ItemSeparatorComponent={this._separator}
          />

      </View>
    );
  }


  _renderItem=({item})=>{
        return (
            <View style={{flex:1 ,flexDirection:'row',justifyContent:'space-between'}}>
                <View style={{flex:1}}><Text style={{fontSize:22}}>{item.id}</Text></View>
                <View style={{flex:2}}><Text style={{fontSize:22}}>{item.name}</Text></View>
                <View style={{flex:1}}><Text style={{fontSize:22}}>{item.boxOffice}</Text></View>
            </View>
        )
  }
  _keyExtractor=(item,index)=>{
        return item.id.toString();
  }

    _separator=()=>{
        return <View style={{height:1}}></View>
    }




    miQ=()=>{
        fetch(
            "http://192.168.138.1:8080/getAllMovies2",
            {
                method:'POST',
                mode:'cors',
                headers:{
                    Accept:'application/json',
                    "Context-Type":'application/json'
                },
                body:JSON.stringify({username:'Ha'})
            }
        ).then(response=>response.json())
            .then(myjson=>{
                // alert("234567");
                this.setState({
                    moviesList:myjson
                })
            }).catch(err=>{
                alert(err);
        })
 }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

Web 3.0 react

App.js

import React, { Component } from 'react';
import {Button} from "antd";
import "antd/dist/antd.css";

import './App.css';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            moviesList:[{id:1,name:'哈哈'},{id:2,name:'演示'}]
        };

    }

    render() {
        return (
            <div>
                试验-----------
                <div>{this.state.moviesList[0].name}</div>
                <Button type="primary" shape="round" icon="download" onClick={this.miQ}/>
                <table>
                    <tr>
                        <th>排列ID</th><th>ID</th><th>电影名称</th><th>票房</th>
                    </tr>
                    {this.state.moviesList.map((item,index)=>{
                        return <tr><td>{index}</td><td>{item.id}</td><td>{item.name}</td><td>{item.boxOffice}</td></tr>
                    })}
                </table>
            </div>
        );
    }


    miQ=()=>{
        fetch(
            "/getAllMovies2",
            {
                method:'POST',
                mode:'cors',
                headers:{
                    Accept:'application/json',
                    "Context-Type":'application/json'
                },
                body:JSON.stringify({username:'Ha'})
            }
        ).then(response=>response.json())
            .then(myjson=>{
                // alert("234567");
                this.setState({
                    moviesList:myjson
                })
            }).catch(err=>{
            alert(err);
        })
    }
}

export default App;

1. package.json文件

末尾添加 "homepage":"."

　　启动 build

获得下面的数据

然后在IDEA 中创建 page文件(自定义名)

　　　　把在 react 中打包的东西放到IDEA 软件的项目中

运行命令：http://localhost:8080/page/index.html

第一个Test Movies MVC 作业+web 1.0+web 2.0+ web 3.0

猜你喜欢