2022东软Java暑假实训
生活随笔
收集整理的這篇文章主要介紹了
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箭頭函數
const f = function(v){return v+v; } 等價于: const fx = (v)=>{return v+v; } 箭頭函數的語法規則: 1.如果函數的形參數量為1,那么形參的小括號可以省略,否則不允許const fx = v => {return v+v;} 2.如果函數體只有一條語句,則大括號可以省略const fx = v => v+v; 3.如果函數體只有一條語句,且是return,那么大括號和return都可以省略const fx = x=>x*x;let arr =[1,23,4,3,45,675,465,678,65,4,6,6,7,5,8,789,56,34]; let arrr = arr.filter(x => x%2==0) let s = arr.reduce((x,y)=> x + y);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、removeItem1.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父子組件通信(父組件->子組件)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <body><div id="app"><compo></compo></div><template id="tem"><div><h2>父組件</h2><com :live="money"></com></div></template><script type="text/javascript">let son = {template:`<h5>子組件,接收到生活費:{{live}}</h5>`,props:['live']}let father = {template: '#tem',data(){return{money:1000}},components:{com:son}}let vuetest = new Vue({el:'#app',components: {compo:father}})</script> </body>2.4父子組件通信(子組件->父組件)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <body><div id="app"><compo></compo></div><template id="tem"><div><h2>父組件</h2><h2>子組件給父組件:{{childm}}</h2><com @childmoney="get" :live="money"></com></div></template><script type="text/javascript">let son = {template:`<div><h5>子組件,接收到生活費:{{live}}</h5><button @click="send">孝敬父組件</button></div>`,props:['live'],methods:{send(){this.$emit('childmoney',500)}}}let father = {template: '#tem',data(){return{money:1000,childm:0}},methods:{get(childmoney){this.childm=childmoney}},components:{com:son}}let vuetest = new Vue({el:'#app',components: {compo:father}})</script> </body> 父組件->子組件 子組件props屬性接收 子組件->父組件 子組件通過$emit主動給父組件數據,父組件監聽子組件傳遞數據的屬性childmoney 注意:vue不識別駝峰命名法,需要都用小寫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: trace4.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 serveLeID, DelMark) values" +
" (#{id},#{userName},#{password},#{realName},#{useType},#{docTitleId},#{isScheduling},#{deptId},#{registLeId},#{delMark})")
int insertUser(User user);
}
進行模糊查詢
and realname like concat(‘%’,#{name},‘%’)
控制器是直接和前端進行交互的
## 5.前后端交互只有axios可以從前端獲取后端數據
this.$axios.get().then()
created() {
let that = this //處理指向沖突
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …,this指代的就是this.axios了
})
}
外部的.js文件
var 函數名 = (function (){
//函數體
})();
export {
函數名
}
VUE組件內部
掛號級別管理:增刪改查完成了
科室管理:增刪查
cnpm install
cnpm run serve
總結
以上是生活随笔為你收集整理的2022东软Java暑假实训的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 等额本息计算 按期计算
- 下一篇: 集成运算放大电路与Multisim仿真学