vue 와 boottstrap 기반 간단 한 게시판 기능 구현

본 논문 의 사례 는 vue 가 간단 한 게시판 기능 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
vue 를 처음 접 한 전단 소 백 으로서 저 는 여기 서 학습 과정 을 기록 하고 싶 습 니 다.여러분 과 함께 발전 하고 싶 습 니 다.타당 하지 않 은 점 이 있 으 면 많이 가르쳐 주세요.
오늘 은 제 가 vue 를 배 운 다음 날 입 니 다.간단 하고 쉬 운 게시판 을 만 들 고 싶 습 니 다.기능 은 매우 간단 하 다.바로 데이터 의 첨삭 과 수정 이다.다음은 본론 으로 들 어가 기 시작한다.
대략적인 레이아웃 은 다음 과 같다.

1.html 레이아웃
css 스타일 을 직접 쓰 고 싶 지 않다 면 boottstrap 프레임 워 크 를 사용 하 는 것 은 좋 은 선택 입 니 다.응답 식,모 바 일 장치 우선 스 트림 격자 시스템 을 제공 합 니 다.

<div id="app" class="container" >
 <h3>{{title}}：</h3>
 <ul class="form-group" style="max-height: 300px;overflow: auto;">
 <li class="list-group-item row" v-for="(item,index) in search" :key="item.id">
  <span class='col-sm-1' >{{item.nikename}}：</span>
  <span class='col-sm-5'>{{item.content}}</span>
  <span class='col-sm-2'>{{item.date}}</span>
  <button class='col-sm-2 btn btn-danger' type="button" @click="del(index,item.id)">  </button>
  <button class='col-sm-2 btn btn-info' type="button" @click="checkPre(index,item.id)">  </button>
 </li>
 </ul>
 <br><br><br>
 <form class="form-horizontal" v-show="bl">
 <div class="form-group">
  <label for="search" class="col-sm-1 control-label">  </label>
  <div class="col-sm-11">
  <input type="text" class="form-control" id="search" placeholder="    " v-model="query" >
  </div>
 </div>
 <div class="form-group">
  <label for="nikename" class="col-sm-1 control-label">  </label>
  <div class="col-sm-11">
  <input type="text" class="form-control" id="nikename" placeholder="     " v-model="nikename">
  </div>
  </div>
  <div class="form-group">
 <label for="content" class="col-sm-1 control-label">  </label>
 <div class="col-sm-11">
  <textarea id="content" class="form-control" rows="3" v-model="content"></textarea>
 </div>
  </div>
  <button type="button" class="btn btn-success col-sm-1 col-sm-push-9" @click="add" >  </button>
  <button type="button" class="btn btn-danger col-sm-1 col-sm-push-10" @click="clear" >  </button>
 </form> 
 <form class="form-horizontal" v-show="!bl">
  <div class="form-group">
 <label class="col-sm-1 control-label">  ：</label>
 <div class="col-sm-11">
  <textarea class="form-control" rows="3" v-model="changeContent"></textarea>
 </div>
  </div>
  <button type="button" class="btn btn-success col-sm-1 col-sm-push-11" @click="confirm">    </button>
 </form> 
</div>

2.데 이 터 는 다음 과 같다.데이터 베 이 스 를 연결 하지 않 았 기 때문에 아 날로 그 데 이 터 를 사용 했다.

data:{
 title:'   ',
 nikename:'',
 content:'',
 date:'',
 query:'',//     
 changeContent:'',//      
 bl:true,
 list:[
 {id:1,nikename:"  ",content:'      ',date:'2020-02-27-18:06'},
 {id:2,nikename:"  ",content:'  ，         ',date:'2020-02-26-18:06'}
 ]
 },

3.추가(발표)기능:

add() {
 this.list.push({
  id: this.list.length + 1,
  nikename: this.nikename,
  content: this.content,
 date:this.getdate()
 })
 this.nikename='';
 this.content='';
 },

사용자 가 입력 한 닉네임 과 내용 은 모두 양 방향 바 인 딩 을 사 용 했 습 니 다.시간 은 현재 시간 입 니 다.발표 단 추 는@click 명령 으로 add 함 수 를 바 인 딩 했 습 니 다.발표 가 끝 난 후 닉네임 과 내용 상 자 를 비 웁 니 다.
4.삭제 기능:

del(index,id){
 this.list.splice(index,1)
 }
clear(){
 this.list = [];//            ,         
 },

삭제 단 추 를 누 르 면 del 에 귀속 되 고,누 르 면 댓 글 을 삭제 하 며,화면 해제 단 추 를 누 르 면 clear 에 귀속 되 며,누 르 면 모든 댓 글 을 삭제 합 니 다.
5.수정 기능:

checkPre(index,id){
 this.bl = !this.bl;
 this.nikename = this.list[index].nikename;
},
confirm(){
 this.list.forEach(function(item,index){
 if(item.nikename == vm.nikename){
 item.content = vm.changeContent;
 item.date = vm.getdate();
 }
 })
 this.bl = !this.bl;
 vm.nikename='';
},

수정 을 누 르 면 vm.bl 의 값 을 바 꾸 고 현재 댓 글 의 닉네임 을 기록 합 니 다.수정 상 자 는 v-show 명령 을 사 용 했 습 니 다.vm.bl 값 이 false 일 때 표 시 됩 니 다.수정 확인 을 누 르 면 현재 닉네임 에 따라 수정 할 댓 글 을 찾 고 내용 과 발표 시간 을 수정 합 니 다.
6.조회 기능:

computed:{
 search(){
 let result = [];
 this.list.forEach((item,index)=>{
 if(item.nikename.includes(this.query) || item.content.includes(this.query)){
 result.push(item)
 }
 })
 return result;
 },
},

조회 기능 은 조회 상자 가 입력 한 내용 에 의존 하기 때문에 계산 속성 을 사용 합 니 다.
만약 에 여러분 이 깊이 공부 하고 싶다 면여기,이곳을 클릭 하여 공 부 를 하고 멋 진 주제 3 개 를 추가 할 수 있 습 니 다.
Bootstrap 학습 강좌
Bootstrap 실전 튜 토리 얼
Bootstrap 플러그 인 사용 강좌
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 은 본문 에 관 한 모든 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.