Java项目实训（3）

2021/1/2
一、今日所学内容
宠物类别
1、添加宠物类别
2、删除宠物类别
3、修改宠物类别
4、查询宠物类别〔列表)
5、查询单条宠物信息的接口

流程：
1.创建一个springboot项目
2.设计分层，controller、service、dao、entity（实体类）
controller里面定义一个方法，启动项目
会报错 url （因为没有配置数据源）需要提前建好数据库
在这里插入图片描述

3.需要提前创建实体类在这里插入图片描述

4.需要在dao包里创建对应的接口，需要添加注解@Repository在这里插入图片描述

5.需要在service包中创建service接口和service接口的实现类并添加注解@Service在这里插入图片描述

6.添加mapper文件夹及文件夹下的mapper.xml文件在这里插入图片描述

7.在xml文件中添加mybatis的相关信息
8.启动项目，可能会报错
在这里插入图片描述

需要添加扫描包的注解
9 .重新启动项目，项目日志提示dao.方法not found错误
在这里插入图片描述

解决方法是在application.yml中添加上面的配置



在指定路径下创建项目

1.命令行打开 npm

输入【npm  start】

2.进入f盘

输入【f:】 进入某个文件夹 【cd react】 

接着进入文件夹 【cd reactPropect】



创建项目：



即在指定路径下创建项目 



node 版本：v6.11.2
npm 版本：3.10.10
开发（在UI目录下）

# 安装依赖
npm install

## 若上述不行则采取下面命令
npm install --registry=https://registry.npm.taobao.org

# 本地开发 开启服务
npm run dev
1
2
3
4
5
6
7
8
浏览器访问 http://localhost:8082

发布
# 构建生成环境
npm run build:prod

npm install -g cnpm --registry=https://registry.npm.taobao.org
cd litemall/litemall-admin
cnpm install
cnpm run dev

把components重命名为views，在此目录下新建Login.vue、Home.vue

Login.vue

<template>
  <div class="page">
    <h2>Login Page</h2>
  </div>
</template>
 
<script>
export default {
  name: 'Login'
}
</script>
Home.vue

<template>
  <div class="page">
    <h2>Home Page</h2>
  </div>
</template>
 
<script>
export default {
  name: 'Home'
}
</script>
添加路由：在router下的index.js中配置Login和Home页面

index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '../views/HelloWorld'
import Login from '../views/Login'
import Home from '../views/Home'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    }
  ]
})
分别访问http://localhost:8081/#/和http://localhost:8081/#/login

首页：http://localhost:8081/#/



登录页面：http://localhost:8081/#/login



我们把V这个logo给去掉：在App.vue中注释掉img







二、感受及收获

今天学习了springboot建立和前端，spring在昨天的以及讲的很详细了，今天重点讲了一下前端，说到前端就要知道node和vue，Vue.js是什么？

Vue.js是一款流行的JavaScript前端框架，一个用于创建用户界面的开源JavaScript框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

node.js是什么？

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。Node是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。