毕设

Posted by 盈盈冲哥 on October 5, 2020

HTML & CSS

HTML w3schools

CSS w3schools

JavaScript w3schools

HTML 菜鸟教程

CSS 菜鸟教程

JavaScript 菜鸟教程

  • HTML文档实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>文档标题</title>
    </head>
    <body>
    文档内容......
    </body>
    </html>
    
  • HTML头部

    • <link>

      定义资源引用地址

      <link> 标签通常用于链接到样式表:

      1
      2
      3
      
      <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
      </head>
      
    • <style>

      定义HTML文档的样式文件

      1
      2
      3
      4
      5
      6
      
      <head>
      <style type="text/css">
      body {background-color:yellow}
      p {color:blue}
      </style>
      </head>
      
    • <meta>

      定义HTML文档中的元数据

    • <script>

      用于加载脚本文件,如JavaScript

  • HTML元素

    • 标题

      1
      
      <h1> - <h6>
      
    • 段落

      1
      
      <p>
      
    • 链接

      1
      
      <a href="url地址">描述</a>
      
    • 图片

      1
      
      <img loading="lazy" src="/images/logo.png" width="258" height="39" />
      
    • 换行

      1
      
      <br>
      
    • <div> 定义文档中的分区或节(division/section)。

      <span>定义 span,用来组合文档中的行内元素。

  • HTML属性

    • class: 类名从样式文件引入
    • id: 元素的唯一id
    • style:元素的行内样式
    • title: 元素的额外信息
  • CSS Id和Class选择器

    样式规则应用于元素属性 id=”para1”.

    1
    2
    3
    4
    5
    
    #para1
    {
        text-align:center;
        color:red;
    }
    

    所有拥有 center 类的 HTML 元素均为居中。

    1
    
    .center {text-align:center;}
    

    所有的 p 元素使用 class=”center” 让该元素的文本居中。

    1
    
    p.center {text-align:center;}
    

Vue

Vue

Vue 菜鸟教程

Ant Design

Element UI

Bootstrap Vue

Vue + Spring Boot 项目例子

教程笔记

  • 介绍

    • 指令
      • v-bind: 将数据绑定到attribute
      • v-if: 条件,将数据绑定到 DOM 结构
      • v-for: 循环
      • v-on: 添加一个事件监听器
      • v-model: 表单输入和应用状态之间的双向绑定
    • 组件化
      • 组件接受一个prop,类似于一个自定义 attribute
      • 利用v-bind指令,将数据绑定到组件的attribute,也需要为每个组件提供一个key
  • 第2节 创建第一个vue应用

    1
    2
    3
    
    <div id="app">
        
    </div>
    
    1
    2
    3
    4
    5
    6
    
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
    

    Vue是一个全局的变量,new Vue()返回一个Vue实例。

    el表示element,是一个id选择器。

    data是数据属性,包含message。

  • 第3节 数据与方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    // 我们的数据对象
    var data = { a: 1 }
    
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
      data: data
    })
    
    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    vm.a == data.a // => true
    
    // 设置 property 也会影响到原始数据
    vm.a = 2
    data.a // => 2
    
    // ……反之亦然
    data.a = 3
    vm.a // => 3
    

    只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。

    除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    var data = { a: 1 }
    var vm = new Vue({
      el: '#example',
      data: data
    })
    
    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true
    
    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
      // 这个回调将在 `vm.a` 改变后调用
    })
    
  • 第4节 生命周期

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    
    var vm = new Vue({
      el : "#app",
      data : {
        msg : "hi vue",
      },
      //在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
      beforeCreate:function(){
        console.log('beforeCreate');
      },
      /* 在实例创建完成后被立即调用。
      在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。
      然而,挂载阶段还没开始,$el 属性目前不可见。 */
      created	:function(){
        console.log('created');
      },
      //在挂载开始之前被调用:相关的渲染函数首次被调用
      beforeMount : function(){
        console.log('beforeMount');
    
      },
      //el 被新创建的 vm.$el 替换, 挂在成功	
      mounted : function(){
        console.log('mounted');
        
      },
      //数据更新时调用
      beforeUpdate : function(){
        console.log('beforeUpdate');
            
      },
      //组件 DOM 已经更新, 组件更新完毕 
      updated : function(){
        console.log('updated');
            
      }
    });
    
  • 第5节 模板语法-插值

    数据绑定

    1
    
    <span>Message: </span>
    
    1
    
    <span v-once>这个将不会改变: </span>
    

    双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,需要使用 v-html 指令。

    对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    <div id="app">
        
      <p>Using mustaches: </p>
      <p v-html="rawHtml"></p>
      <div v-bind:class="color">test...</div>
      <p></p>
      <p>1</p>
      <p></p>
    </div>
    <style type="text/css">
    .red{color:red;}
    .blue{color:blue; font-size:100px;}
    </style>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    var vm = new Vue({
      el : "#app",
      data : {
        msg : "hi vue",
        rawHtml : '<span style="color:red">this is should be red</span>',
        color:'blue',
        number : 10,
        ok : 1,
        message : "vue"
      }
    });
    
  • 第6节 模板语法-指令

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <div id="app">
      <p v-if="seen">现在你看到我了</p>
      <a v-bind:href="url">...</a>
      <div @click="click1">
        <div @click.stop="click2">
          click me
        </div>
      </div>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    var vm = new Vue({
      el : "#app",
      data : {
        seen : false,
        url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
      },
      methods:{
        click1 : function () {
          console.log('click1......');
        },
        click2 : function () {
          console.log('click2......');
        }
      }
    });
    

    点击click me,只触发click2函数,之后会停下来不去触发click1.

  • 第7节 class与style绑定

    • 绑定HTML class

      对象语法

      1
      
      <div v-bind:class="{ active: isActive }"></div>
      

      静态的class和动态的class共存

      1
      2
      3
      4
      
      <div
        class="static"
        v-bind:class="{ active: isActive, 'text-danger': hasError }"
      ></div>
      

      数组语法

      1
      
      <div v-bind:class="[activeClass, errorClass]"></div>
      

      三元运算符

      1
      
      <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
      
    • 绑定style

      1
      2
      3
      4
      
      <div 
      :style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
        hi vue
      </div>
      
  • 第8节 条件渲染

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
    

    带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

    1
    
    <h1 v-show="ok">Hello!</h1>
    

    v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

  • 第9节 列表渲染

    用 v-for 指令基于一个数组来渲染一个列表。

    1
    2
    3
    4
    5
    
    <ul id="example-1">
      <li v-for="item in items" :key="item.message">
          
      </li>
    </ul>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
    

    在 v-for 块中,可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数,即当前项的索引。

    1
    2
    3
    4
    5
    
    <ul id="example-2">
      <li v-for="(item, index) in items">
         -  - 
      </li>
    </ul>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    new Vue({
      el: '#v-for-object',
      data: {
        object: {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
        }
      }
    })
    

    为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute:

    1
    2
    3
    
    <div v-for="item in items" v-bind:key="item.id">
      <!-- 内容 -->
    </div>
    
  • 第10节 事件绑定

    1
    2
    3
    4
    5
    6
    
    <div id="app">
      <div id="example-1">
        <button v-on:click="counter += 1"> 数值 :   </button><br />
        <button v-on:dblclick="greet('abc', $event)">Greet</button>
      </div>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    var vm = new Vue({
      el : "#app",
      data : {
        counter: 0,
        name : "vue"
      },
      methods:{
        greet : function (str, e) {
          alert(str);
          console.log(e);
        }
      }
    });
    

    Difference between @click and v-on:click Vuejs

    @click 和 v-on:click 有什么区别?没有区别。

  • 第11节 表单输入绑定

    v-model双向绑定

    文本

    1
    2
    
    <input v-model="message" placeholder="edit me">
    <p>Message is: </p>
    

    单个复选框

    1
    2
    
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox"></label>
    

    多个复选框

    1
    2
    3
    4
    5
    6
    7
    8
    
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: </span>
    

    单选按钮

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <div id="example-4">
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>Picked: </span>
    </div>
    

    通过改变data对象的属性,来设置表单元素默认值。

  • 第12节 组件基础

    1
    2
    3
    4
    5
    6
    
    <div id="app">
      <button-counter title="title1 : " @clicknow="clicknow">
        <h2>hi...h2</h2>
      </button-counter>
      <button-counter title="title2 : "></button-counter>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    
    Vue.component('button-counter', {
      props: ['title'],
      data: function () {
        return {
          count: 0
        }
      },
      template: '<div><h1>hi...</h1><button v-on:click="clickfun"> You clicked me 8 times.</button><slot></slot></div>',
      methods:{
        clickfun : function () {
          this.count ++;
          this.$emit('clicknow', this.count);
        }
      }
    })
    var vm = new Vue({
      el : "#app",
      data : {
          
      },
      methods:{
        clicknow : function (e) {
          console.log(e);
        }
      }
    });
    

    一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。如果 Vue 没有这条规则,点击一个按钮就可能会像如下代码一样影响到其它所有实例。

    props是组件的参数,通过父组件传入。

    template只能有一个根节点,可以用<div>作为根节点。

    点击后,组件的$emit方法触发clicknow事件,从而调用clicknow函数。

  • 第13节 组件注册

    组件命名:kebab-case (短横线分隔命名)、PascalCase (首字母大写命名)

    1
    2
    3
    4
    
    <div id="app">
      <button-counter></button-counter>
      <test></test>
    </div>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    
    Vue.component('button-counter', {
      props: ['title'],
      data: function () {
        return {}
      },
      template: '<div><h1>hi...</h1></div>',
      methods:{
          
      }
    })
    var vm = new Vue({
      el : "#app",
      data : {
          
      },
      methods:{
        clicknow : function (e) {
          console.log(e);
        }
      },
      components:{
        test : {
          template:"<h2>h2...</h2>"
        }
      }
    });
    

    button-counter是全局注册,test是局部注册。

  • 第14节 单文件组件

    组件test.vue:包括template, script, style三部分。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    
    <template>
      <div class="hello">
        <h1 class="red"></h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        //msg: String
        msg: {
          type: String,
          default: "test msg"
        }
      },
      methods: {
    
      },
      data () {
        return {
    
        }
      }
    }
    </script>
    
    <style>
    .red{color:red}
    </style>
    

    App.vue中引入组件,利用components来局部注册。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    
    <template>
      <div id="app">
        <test></test>
      </div>
    </template>
    <script>
    
      import test from '@/components/test.vue'
    
      export default {
        name: 'App',
        components: {test}
      }
    </script>
    
    <style>
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        /*margin-top: 10px;*/
      }
    </style>
    

项目初始化

  • 安装脚手架工具

    npm install -g @vue/cli

  • 构建项目

    vue init webpack projectname

  • 项目结构

    • config
      • index.js: 项目配置
    • src
      • components: 组件
      • router
        • index.js: 路由配置
      • App.vue: 根组件
      • main.js: 入口
    • index.html: 首页入口

    在main.js中引入路由配置router和根组件App.vue并定义app,在首页入口index.html中使用app。

    在main.js中设置反向代理地址,在config/index.js中配置跨域请求。

  • 代码分析

    index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>recommender-vue</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    

    <div id="app"></div>在构建的文件会自动注入

    App.vue

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    export default: 将这个组件整体导出,之后就可以使用 import 导入组件了。

    <router-view/>是一个容器,名字叫“路由视图”,意思是当前路由(URL)指向的内容将显示在这个容器中。

    main.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    最上面 import 了几个模块,其中 vue 模块在 node_modules 中,App 即 App.vue 里定义的组件,router 即 router 文件夹里定义的路由。

    Vue.config.productionTip = false, 作用是阻止vue 在启动时生成生产提示。

    在这个 js 文件中,我们创建了一个 Vue 对象(实例),el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标,router 代表该对象包含 Vue Router,并使用项目中定义的路由。components 表示该对象包含的 Vue 组件,template 是用一个字符串模板作为 Vue 实例的标识使用,类似于定义一个 html 标签。

    /* eslint-disable no-new */的作用

    eslint-disable 的意思是完全禁用ESLint进行检测。

项目

其他问题

无法修改favicon

Change favicon Vuejs?

How to set favicon.ico properly on vue.js webpack project?

1
<link rel="shortcut icon" type="image/png" href="/src/assets/img/logo.png"/>`

For your favicon issue, you can put a favicon.ico or favicon.png into the static folder and refer in the <head> of your index.html as follows:

1
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>

AntDesign

ant.design.vue中table的使用说明

column中dataIndex, key表示数据的字段,scopedSlots: { customRender: ‘action’ }表示customRender 对应table中的插槽名。

中,slot=”action” 表示插槽名,slot-scope=”record”表示该插槽内部利用record能获取到的该行的数据,例如。

Spring MVC

IDEA 新建 Spring MVC 工程项目与 SpringMVC 运行流程

Spring MVC框架( IDEA版 )

IDEA新建工程

安装 IDEA 成功后,选择 File -> New -> Project,左边栏中选择 Maven,选择 Create From archetype,然后选中 org.apache.maven.archetypes:maven-archetype-webapp

GroupId为域+公司名,ArtifactId为项目名。

初始代码

pom.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.bupt</groupId>
  <artifactId>recommender</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>recommender Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <spring.version>5.0.2.RELEASE</spring.version>
  </properties>

  <dependencies>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>

  <build>
    <finalName>recommender</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>
</project>

webapp/WEB-INF/web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>

  <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:springmvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

src/resources/springmvc.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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:mvc="http://www.springframework.org/schema/mvc"
       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/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

    <!-- 开启注解扫描 -->
    <context:component-scan base-package="com.bupt"/>

    <!-- 视图解析器对象 -->
    <bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/pages/"/>
        <property name="suffix" value=".html"/>
    </bean>

    <mvc:default-servlet-handler/>

    <!-- 开启SpringMVC框架注解的支持 -->
    <mvc:annotation-driven/>
</beans>
  • <mvc:annotation-driven>

    <mvc:annotation-driven> 会自动注册 RequestMappingHandlerMapping 与 RequestMappingHandlerAdapter 两个 Bean,这两个是 Spring MVC 为 @Controller 分发请求所必需的,并且提供了数据绑定支持。

  • <mvc:default-servlet-handler/>

    mvc:default-servlet-handler标签的作用

    如果没有<mvc:default-servlet-handler/>,对于静态资源的请求都会被看作是一个普通的后台控制器请求,导致请求找不到而报 404 异常错误,tomcat日志会报No mapping found for HTML request with URI […] in DispacherServlet.

    在 application-context-mvc.xml 中配置 < mvc:default-servlet-handler />后,会在Spring MVC上下文中定义一个 org.springframework.web.servlet.resource 包下的 DefaultServletHttpRequestHandler,它的作用类似于一个检查员,对进入 DispatcherServlet 的 URL 进行筛查。如果发现是静态资源的请求,就将该请求转由 Web 应用服务器默认的 Servlet 处理;如果不是静态资源的请求,才由 DispatcherServlet 继续处理。

src/java/com/bupt/recomender/controller/HelloController.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.bupt.recommender.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloController {

    @RequestMapping(path="/hello")
    public String sayHello() {
        System.out.println("Hello SpringMVC");
        return "success";
    }
}

Tomcat

Run/Debug Configuration里添加Tomcat.

Server选项卡,On ‘Update’ action选Redeploy.

Deployment选项卡,点+和artifact,选recommender:war exploded,Application context填空。

MyBatis

搭建Spring + Spring MVC + Mybatis

IDEA SpringMVC集成mybatis教程

MyBatis

spring mvc中post、get方法获取参数的几种方式

日志

log4j

使用SLF4J和Logback

SLF4J 和 Logback 在 Maven 项目中的使用方法

Shiro

Vue + Spring Boot 项目实战(十三):使用 Shiro 实现用户信息加密与登录认证

shiro和Spring Mvc集成教程

Shiro学习(三)整合springmvc项目

解决 spring-test 出现 Failed to load ApplicationContext 的异常

JUnit

Spring中使用单元测试SpringTest

SpringMVC下的JUnit4单元测试

MyBatis generator

SpringBoot使用Mybatis-Generator

mybatis-generator installed 却无法在maven 的Plugins显示怎么办

使用MyBatisGenerator生成代码报错The specified target project directory …..does not exist

其他问题

Tomcat启动乱码

数据库

MySQL

mysql导入导出sql文件

for i in “event” “eventuser” “relation” “user” “web_event”; do for j in “shanghai_2018” “shanghai_2017” “shanghai”; do echo “sudo mysql douban_$j < douban_“$j”_“$i”.sql”; done; done

for i in “event” “eventuser” “relation” “user” “web_event”; do for j in “shanghai_2018” “shanghai_2017” “shanghai”; do sudo mysql douban_$j < douban_“$j”_“$i”.sql; done; done

CREATE USER ‘douban_readonly’@’%’ IDENTIFIED BY ‘douban_readonly’; GRANT SELECT ON . TO ‘douban_readonly’@’%’ CREATE USER ‘douban’@’%’ IDENTIFIED BY ‘douban_mysql_817’; GRANT ALL PRIVILEGES ON. TO ‘douban’@’%’

/etc/mysql/mysql.conf.d/mysqld.cnf bind-address = 0.0.0.0

/etc/init.d/mysql restart (sudo service mysql restart)

PostgreSQL

PostgreSQL postgresql 导出和导入数据库 如何设置PostgreSQL允许被远程访问

Linux

端口映射

ssh -NvL 8889:127.0.0.1:8888 sjy2018@10.105.240.25

杀死进程

Linux kill包含关键字所有进程

ps aux grep cockroach awk ‘{print $2}’ xargs kill -9