當前位置：首頁 > 编程语言 > java >内容正文

java

2022东软Java暑假实训

發布時間：2024/3/26 java 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 2022东软Java暑假实训小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2021Java實訓

1.前端

<img src="地址" alt="當圖片消失時顯示的文字" title="當光標放在圖片上時顯示的文字"/> form表單：收集用戶提交的數據，并提交給后臺服務器 submit按鈕不能有name屬性通過form表單收集數據時，如果向服務器提交數據，必須指明name屬性，向服務器提交的數據格式為name為key，value為v的鍵值對選擇器：1.標簽選擇器2.類選擇器3.id選擇器 JavaScript的main函數寫法：也叫立即執行函數，往往只會執行一次(function f(){console.log(123);})();

1.1Array

js排序規則：let books=[{title:'bbbb',price:12},{title:'aaaa',price:10},{title:'ccc',price:14},{title:'ddd',price:13}];console.log(books);books.sort(ruletitle);function rule(x, y){ // sort 的排序規則函數的規則： x>y ? 1:-1;return x.price - y.price ;}function ruletitle(x, y){return x.title > y.title ? 1 : -1;}console.log(books);console.log('ab' > 'ba'); Array數組的filter方法：var ages = [32, 33, 16, 40];function checkAdult(age) {return age >= 18;}function myFunction() {document.getElementById("demo").innerHTML = ages.filter(checkAdult);}或者：const ages = [32, 33, 16, 40];let agesr = ages.filter(function(age){return age>=18;})console.log(agesr); forEach方法：arr.forEach(function(item){console.log(item);}) map方法：類似于函數的一一對應const arr =[1,23,4,3,45,675,465,678,65,4,6,6,7,5,8,789,56,34];// 保持著一一對應的關系let arrr = arr.map(function(item){return 0})console.log(arrr); reduce方法：const arr =[1,23,4,3,45,675,465,678,65,4,6,6,7,5,8,789,56,34];let s = arr.reduce(function(x,y){return x + y;})等價于：let s = 0;for(var i = 0;i < arr.length;i++){let x = arr[i];s = s + x;} find方法：let books=[{title:'bbbb',price:12},{title:'aaaa',price:10},{title:'ccc',price:14},{title:'ddd',price:13}];let book = books.find(function(b){return b.title === 'aaaa';})console.log(book); join方法：將數組的數據用'-'連接起來let s = arr.join('-')

1.2箭頭函數

1.3DOM、BOM

動態顯示時間：function settime() {let h2t = document.getElementById('rest');let now = new Date();let s = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;h2t.innerHTML = s;}setInterval(()=>{settime()},1000)全選和反選用js實現：<script type="text/javascript">(()=>{let sa = document.getElementById('sa');sa.onclick=(event)=>{let checked = event.target.checked;let gids = document.getElementsByName('gids');gids.forEach((input)=>{input.checked = checked;});};// 反選功能實現let sa1 = document.getElementById('sa1');sa1.onclick=( )=>{let gids = document.getElementsByName('gids');gids.forEach((input)=>{input.checked = !input.checked;});};})(); </script>

1.4ES6新特性

1.函數的擴展rest參數：可以用于獲取函數的多余參數const f = (x,y,...rest)=>{console.log(rest);}let sum = f(3,32,3,36,66,4)//rest=3,36,66,4 2.arguments：const f= function(){console.log(arguments);//輸出實際參數console.log(123);}f(3,32,3,6,66,4);

1.5JSON

滿足JSON的共有兩種：1.滿足JSON語法的字符串2.滿足JSON格式要求的JavaScript對象 JSON與字符串之間的轉換：JSON轉換成字符串：使用JSON.stringify()字符串轉換成JSON：使用JSON.parse()

1.6Web存儲

sessionStorage、LocalStorage setItem、getItem、removeItem

1.7類

在javascript中，每一個類都有一個prototype，它就是類的原型，類的所有實例共享一個原型。

2.VUE

2.1全局組件

全局組件的使用必須依賴于某個vue的實例： <script>Vue.component('mycom',{template:"<h5>nihao</h5>"}) </script> <div id="app"><mycom></mycom> //起作用 </div> <mycom></mycom> //不起作用

2.2全局組件的另一種寫法

<template id="mytemplate"><div><h2>{{message}}</h2></div> </template> <script>Vue.component('mycom',{template:"#mytemplate"}) </script>

2.3父子組件通信(父組件->子組件)

2.4父子組件通信(子組件->父組件)

2.5路由的配置和使用以及重定向

<body><div id="app"><h2>東軟云醫院</h2><hr><router-link to="/register">窗口掛號</router-link><router-link to="/exit">窗口退號</router-link><router-view></router-view></div><script>//1.定義組件實例let register = {template:`<div><h3>窗口掛號</h3></div>`}let exit = {template:`<div><h3>窗口退號</h3></div>`}let welcome = {template: `<div><img src="../img/2.jpg"></div>`}//2.定義路由規則const routes = [{path: '/',redirect: '/welcome'},{path: '/register',name: 'register',component: register},{path: '/exit',name: 'exit',component: exit},{path: '/welcome',name: 'welcome',component: welcome}]//3.創建路由的實例，識別路由規則的配置const router = new VueRouter({routes: routes})//4.將路由對象掛載到vue實例上，讓當前整個頁面都能進行路由的識別和訪問let vuetest = new Vue({el:"#app",data:{},router})</script></body>

2.6路由的嵌套

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script> </head> <body><div id="app"><h2>東軟云醫院</h2><hr><router-link to="/register">掛號收費</router-link><router-link to="/doctor">門診醫生</router-link><router-view></router-view></div><template id="register"><div><p>窗口掛號>></p><router-link to="/register/exit">窗口退號</router-link><router-view></router-view></div></template><template id="doctor"><div><p>門診醫生>></p><router-link to="/doctor/login">看診記錄</router-link><router-view></router-view></div></template><script>//1.定義組件實例let register = {template:'#register'}let doctor = {template:'#doctor'}let welcome = {template: `<div><img src="../img/2.jpg"></div>`}let exit = {template: `<div><p>窗口退號222</p></div>`}let login = {template: `<div><p>看診記錄222</p></div>`}//2.定義路由規則const routes = [{path: '/',redirect: '/welcome'},{path: '/register',name: 'register',component: register,children: [{path: '/register/exit',name: 'exit',component: exit}]},{path: '/doctor',name: 'doctor',component: doctor,children: [{path: '/doctor/login',name: 'login',component: login}]},{path: '/welcome',name: 'welcome',component: welcome}]//3.創建路由的實例，識別路由規則的配置const router = new VueRouter({routes: routes})//4.將路由對象掛載到vue實例上，讓當前整個頁面都能進行路由的識別和訪問let vuetest = new Vue({el:"#app",data:{},router})</script></body> </html>

2.7路由的傳參

query get 明文，不安全，快，數據大小<=255byte params post 加密，安全，慢，數據大小沒有上限 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script> </head> <body><div id="app"><h2>東軟云醫院</h2><hr><router-link :to="{name:'register',params:{rid:'123456'}}">窗口掛號</router-link><router-link :to="{path:'/exit',query:{eid:'222222'}}">窗口退號</router-link><router-view></router-view></div><script>//1.定義組件實例let register = {template:`<div><h3>{{$route.params.rid}}窗口掛號</h3></div>`}let exit = {template:`<div><h3>{{$route.query.eid}}窗口退號</h3></div>`}let welcome = {template: `<div><img src="../img/2.jpg"></div>`}//2.定義路由規則const routes = [{path: '/',redirect: '/welcome'},{path: '/register',name: 'register',component: register},{path: '/exit',name: 'exit',component: exit},{path: '/welcome',name: 'welcome',component: welcome}]//3.創建路由的實例，識別路由規則的配置const router = new VueRouter({routes: routes})//4.將路由對象掛載到vue實例上，讓當前整個頁面都能進行路由的識別和訪問let vuetest = new Vue({el:"#app",data:{},router})</script></body> </html>

2.8邏輯控制路由的跳轉

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script> </head> <body><div id="app"><h2>東軟云醫院</h2><hr><router-link to="/register">窗口掛號</router-link><router-link to="/exit">窗口退號</router-link><router-view></router-view></div><template id="login"><div><form>賬號：<input type="text" v-model="user.id"><br>密碼：<input type="password" v-model="user.pwd"><br><button @click="checkLogin">登錄</button></form></div></template><script>//1.定義組件實例let register = {template:`<div><h3>窗口掛號</h3></div>`}let exit = {template:`<div><h3>窗口退號</h3></div>`}let welcome = {template: `<div><img src="../img/2.jpg"></div>`}let login = {template: '#login',data(){return{user:{}}},methods:{checkLogin(){if(this.user.id=="admin"&&this.user.pwd=="123456"){alert("正確")this.$router.push("/welcome")}else{alert("錯誤")}}}}//2.定義路由規則const routes = [{path: '/',redirect: '/login'},{path: '/register',name: 'register',component: register},{path: '/exit',name: 'exit',component: exit},{path: '/welcome',name: 'welcome',component: welcome},{path: '/login',name: 'login',component: login}]//3.創建路由的實例，識別路由規則的配置const router = new VueRouter({routes: routes})//4.將路由對象掛載到vue實例上，讓當前整個頁面都能進行路由的識別和訪問let vuetest = new Vue({el:"#app",data:{},router})</script></body> </html>

2.9路由的導航守衛

作用：在路由跳轉前完成一些校驗路由實例.beforeEach((to,from,next)=>{})to:目標路由from:當前路由next:函數，表示繼續執行路由跳轉 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script> </head> <body><div id="app"><h2>東軟云醫院</h2><hr><router-link to="/register">窗口掛號</router-link><router-link to="/exit">窗口退號</router-link><router-view></router-view></div><template id="login"><div><form>賬號：<input type="text" v-model="user.id"><br>密碼：<input type="password" v-model="user.pwd"><br><button @click="checkLogin">登錄</button></form></div></template><script>//1.定義組件實例let register = {template:`<div><h3>窗口掛號</h3></div>`}let exit = {template:`<div><h3>窗口退號</h3></div>`}let welcome = {template: `<div><img src="../img/2.jpg"></div>`}let login = {template: '#login',data(){return{user:{}}},methods:{checkLogin(){if(this.user.id=="admin"&&this.user.pwd=="123456"){//將登錄成功信息存儲成一個標識sessionStorage.setItem("isLogin","true")alert("正確")this.$router.push("/welcome")}else{sessionStorage.setItem("isLogin","false")alert("錯誤")}}}}//2.定義路由規則const routes = [{path: '/',redirect: '/login'},{path: '/register',name: 'register',component: register},{path: '/exit',name: 'exit',component: exit},{path: '/welcome',name: 'welcome',component: welcome},{path: '/login',name: 'login',component: login}]//3.創建路由的實例，識別路由規則的配置const router = new VueRouter({routes: routes})//4.將路由對象掛載到vue實例上，讓當前整個頁面都能進行路由的識別和訪問let vuetest = new Vue({el:"#app",data:{},router})//路由導航的前置守衛router.beforeEach(function (to,from,next) {//確定守衛的路由列表const list = ['/register','/exit']if(list.indexOf(to.path)>=0){//判斷是否登錄來確定路由是否跳轉let str = sessionStorage.getItem("isLogin")console.log(str+"登陸狀態標識")if (str==null||str=="false"){console.log("非法訪問")//非法訪問應該攔截router.push("/login")location.reload()}}next()})</script></body> </html>

2.10VUE腳手架

啟動服務器：npm run serve下面是vue+element上課代碼 <template><div class="about"><el-button @click="getData">獲取數據</el-button><el-button @click="delSelectRows">批量刪除</el-button><el-button @click="InsertdialogVisible=true">添加數據</el-button><el-table:data="subNews"style="width: 60%"@selection-change="hsc"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnprop="index"label="編號"></el-table-column><el-table-columnprop="word"label="內容"></el-table-column><el-table-columnlabel="編輯"><template slot-scope="scope"><el-button @click="doUpdate(scope.row)" icon="el-icon-edit">修改</el-button><el-button @click="delRow(scope.$index)" icon="el-icon-delete">刪除</el-button></template></el-table-column></el-table><el-paginationbackground:page-size="pageSize"layout="prev, pager, next":total="news.length"@current-change="dopaging"></el-pagination><el-dialogtitle="修改信息":visible.sync="dialogVisible"width="30%"><el-form label-width="80px"><el-form-item label="編碼"><el-input disabled="true" v-model="updateRow.index"></el-input></el-form-item><el-form-item label="內容"><el-input v-model="updateRow.word"></el-input></el-form-item><el-form-item><el-button @click="dialogVisible=false">提交</el-button><el-button @click="dialogVisible=false">取消</el-button></el-form-item></el-form></el-dialog><el-dialogtitle="添加信息":visible.sync="InsertdialogVisible"width="30%"><el-form label-width="80px"><el-form-item label="編碼"><el-input v-model="InsertRow.index"></el-input></el-form-item><el-form-item label="內容"><el-input v-model="InsertRow.word"></el-input></el-form-item><el-form-item><el-button @click="doInsert">提交</el-button><el-button @click="dialogVisible=false">取消</el-button></el-form-item></el-form></el-dialog></div> </template><script>export default {data() {return {dialogVisible: false,InsertdialogVisible: false,msg: "askdjf",news: [],subNews: [],delArr: [],pageSize: 3,currPage: 1,updateRow: {},InsertRow: {}}},methods: {doInsert() {this.news.unshift(this.InsertRow)this.InsertRow = {}this.dopaging(1)this.InsertdialogVisible = false},doUpdate(row) {this.updateRow = rowthis.dialogVisible = true},dopaging(currPage) {this.currPage = currPage //將當前選擇的頁碼存儲到vue的全局變量里//根據當前頁進行分頁//currpage pageSize start end// 1 2 0 2 0,1// 2 2 2 4 2,3//3 ...let start = (currPage - 1) * this.pageSizelet end = currPage * this.pageSizethis.subNews = this.news.slice(start, end)},delSelectRows() {// for (let i in this.delArr){// let dr = this.delArr[i]// console.log(dr)// for (let j in this.news){// if (dr.index==this.news[j].index){// this.news.splice(j,1)// }// }// }//自己寫的for (let i in this.delArr) {if (this.news.indexOf(this.delArr[i]) != -1) {this.news.splice(this.news.indexOf(this.delArr[i]), 1)}}this.dopaging(this.currPage)},delRow(index) {console.log(index + ">>>>>>>>>>>>>.")//this.news.splice(index,1)let r = this.subNews.splice(index, 1) //從數據表格中正在顯示的數據中刪除//將數據從news中刪除for (let i in this.news) {if (this.news[i].index == r[0].index) {this.news.splice(i, 1)}}this.dopaging(this.currPage) //刪除成功后，重新分頁},hsc(arr) {this.delArr = arr},getData() {//通過axios框架，獲取服務器數據--天行數據let key = "b68ac6fd1f3caadc294512b5e24a5bf7"this.$axios.get("http://api.tianapi.com/wxhottopic/index?key=" + key).then((res) => {console.log(res.data.newslist)this.news = res.data.newslistthis.dopaging(1)})}}} </script><style>.el-table {margin: 0 auto;} </style>

2.11VUEX

store文件下的index.js存放可以被全局訪問的數據 export default new Vuex.Store({state: {num: 1000},getters: {},mutations: {num(state, r) {state.num = r}},actions: {},modules: {} })訪問方式：{{$store.state.num}} 修改方式：this.$store.commit('num',1)

3.Git

1.云端倉庫a.在碼云上創建云倉庫b.在本地生成公鑰，與遠程倉庫進行識別配置git config --global user.name "zzy"git config --global user.email "email@example.com"ssh-keygen -t rsa -C "email@example.com"回車三次，生成公鑰把公鑰復制配置到碼云-管理-公鑰c.本地倉庫和遠程倉庫的關聯git remote add origin sshgit remote add origin git@gitee.com:vivi_inno/zzy.gitd.注意!第一次本地倉庫和云端倉庫對接，必須先拉取再推送除了第一次，以后都是直接推送即可拉取命令： git pull --rebase origin master2.本地倉庫a.初始化本地倉庫 git initb.將文件添加到本地倉庫 git add 趙智育.txtc.將添加好的文件進行提交本地倉庫git commit -m "提交文本"d.將本地倉庫的內容推送到云倉庫上git push origin master[注意：云端倉庫提前配置完成]

4.后端

4.1SpringBoot

連接數據庫時有時區的問題？在database后面加上 ?serveTimezone=UTC項目文件中分為5個文件夾： 1.Controller 2.Iservice 3.mapper 4.pojo 5.service 其中，Controller文件夾中放controller層的代碼 Iservice、mapper、service共同組成model層 pojo為數據庫表的實體類

4.2application.yml的配置

server:port: 8080spring:datasource:name: testurl: jdbc:mysql://localhost:3306/his?serveTimezone=UTCusername: rootpassword: 2019201131driver-class-name: com.mysql.cj.jdbc.Drivermybatis:type-aliases-package: com.heu.test.pojoconfiguration:map-underscore-to-camel-case: truelogging:level:com.heu.test.mapper: trace

4.3動態SQL語句

@Mapper public interface UserMapper {@Select("<script>select * from user where 1=1" +"<if test=\"name!=null and name != ''\">and UserName=#{name}</if>" +"<if test=\"id>0\">and ID=#{id}</if>" +"</script>")java.util.List<User> getUserList(String name,int id);@Insert("insert into user(ID, UserName, Password, RealName, UseType, DocTitleID, IsScheduling, DeptID, RegistLeID, DelMark) values" +" (#{id},#{userName},#{password},#{realName},#{useType},#{docTitleId},#{isScheduling},#{deptId},#{registLeId},#{delMark})")int insertUser(User user);@Update("<script>update User set delmark=1 where id in" +"<foreach collection=\"array\" item=\"eno\" open=\"(\" close=\")\" separator=\",\">" +"#{eno}</foreach>" +"</script>")int deletesById(int[] arr);@Delete("delete from user where ID=#{id}")int deleteUserByID(int id); } 進行模糊查詢 and realname like concat('%',#{name},'%') 控制器是直接和前端進行交互的

5.前后端交互

只有axios可以從前端獲取后端數據 this.$axios.get().then()

5.1處理指向沖突

created() {let that = this //處理指向沖突this.$axios.get("http://localhost:8080/user/getlist").then(function (res) {console.log(res.data)that.userList = res.data //如果用this.userList的話，this指代的就是this.$axios了}) }

5.2VUE導入外部的JS文件

外部的.js文件 var 函數名 = (function (){//函數體 })();export {函數名 }VUE組件內部 <script>import {函數名} from '路徑'export default {} </script> 掛號級別管理：增刪改查完成了科室管理：增刪查cnpm install cnpm run serve

LeID, DelMark) values" +
" (#{id},#{userName},#{password},#{realName},#{useType},#{docTitleId},#{isScheduling},#{deptId},#{registLeId},#{delMark})")
int insertUser(User user);

@Update("<script>update User set delmark=1 where id in" +"<foreach collection=\"array\" item=\"eno\" open=\"(\" close=\")\" separator=\",\">" +"#{eno}</foreach>" +"</script>") int deletesById(int[] arr);@Delete("delete from user where ID=#{id}") int deleteUserByID(int id);

}

進行模糊查詢
and realname like concat(‘%’,#{name},‘%’)

控制器是直接和前端進行交互的

## 5.前后端交互

只有axios可以從前端獲取后端數據
this.$axios.get().then()

### 5.1處理指向沖突

created() {
let that = this //處理指向沖突
this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots，this指代的就是this.$ axios了
})
}

### 5.2VUE導入外部的JS文件

外部的.js文件
var 函數名 = (function (){
//函數體
})();

export {
函數名
}

VUE組件內部

掛號級別管理：增刪改查完成了
科室管理：增刪查

cnpm install
cnpm run serve

總結

以上是生活随笔為你收集整理的2022东软Java暑假实训的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。