Laravel×Vue.js를 사용하여 처음으로 웹 애플리케이션을 만들었습니다!

HTML을 처음 배우기 시작한 것은 마침 1년 전의 일이다.
지금은 라벨과 뷰입니다.js를 배웠기 때문에 조금씩 지식을 습득했다
그룹으로서 나는 대규모의 웹 서비스(응용)를 사용해 보았다!
만들다
[육아 지식 공유 사이트-mikata-].
나는 제작에 걸리는 시간과 절차를 총결하고 싶다.
[Mac] 라벨의 설치 단계!환경 변수 PATH를 통과하는 방법은?
그리고 이 글은 1년 동안 프로그램 디자인을 배운 후 이런 느낌을 낼 수 있는 앱을 만들 수 있을 때까지 성장했다!이런 참고가 된다면 정말 기쁠 것 같아요!
프로그래밍 경험이 없어서 1년 동안 응용 프로그램을 배웠어요.
애플리케이션 개발 프로세스 및 환경 및 프레임워크
응용 프로그램 개발의 절차를 따라 보아라.

요건 정의

설계

제작

테스트

공개

버전 관리가 가능한 지트를 사용한 것은 이번이 처음이다.
◇ 환경

Mac

VS 코드(편집기)

MAMP(로컬 환경)

X 서버(공식 환경)

Giit(버전 관리)

GiitHub(버전 관리)

애플리케이션은 주로 Laavel 과 Vue 입니다.제이스입니다.Ui의 커닝과 인증 기능이 프로그램 라이브러리에서 가져왔습니다.
또 베야.Vue Router는 데이터와 함수의 관리 및 유지보수를 향상시키기 위해 js 라우팅에서 Vuex를 가져옵니다.
◇ 프레임워크와 라이브러리

Laravel

Vue.js

Vue Router(Vue.js)

Vuex(Vue.js)

Element Ui(Vue.js)

Auth(Laravel)

[Vue.js] Element-ui의 가져오기 방법!팟캐스트 및 Vue3 대응
[Vue.js] Vuex의 도입 방법과 사용 방법 총괄!초초보자 대상
Laavel에 Vue Router를 포함시키는 방법은?초보자를 대상으로 1부터 해설!
조건 정의
우선 응용 프로그램의 ** 요건 정의(요구 사항 정의 및 실현 방법)부터 시작합니다.
◇ 앱의 목적
육아 세대의 스트레스를 최대한 줄이기 위해서.
◇ 앱 개요

가입 가능한 SNS

질문 및 응답 기능

주석 기능

추적 기능

문제는 문장으로 색인됨

설계
다음은 제작 응용 프로그램의 응용 디자인과 데이터베이스 디자인을 총괄한다.
◇ 데이터베이스 디자인(표)

users

profile

friends

boards

board_category

category

answer

comment

sympathy

bookmark

◇ 필요한 페이지

첫 페이지

기사 페이지

기사 기고문 페이지

기사 편집 페이지

소개 페이지

소개 편집 페이지

착륙 페이지

기타 사이트에 필요한 문의 페이지 등

◇ 제작구조

큰 프레임은 라벨이 제작

어셈블리는 Vue입니다.js에서 설치 및 전환

SPA에 가까운 패브릭

Laavel 측면에만 추가 페이지 설치

데이터베이스에 데이터 저장

API를 통한 데이터베이스 값 획득

컨트롤러에 데이터베이스 CRUD 설치

API는 해당 URL에 액세스하여 지정된 데이터를 Lenovo 정렬로 반환하는 기능입니다.
만들다
총 소요 시간: 200시간
◇ 디자인 부정행위 제작
figma로 대부분의 디자인을 만들었어요.
◇ 실제 코딩 작업
라우팅 처리.php(Laravel)/router.js(Vue.js)
API - 컨트롤러
CRUD→컨트롤러
큰 프레임 레이아웃 -blade 파일
컨텐츠 구성 요소 → Vue.js
방법의 일원화→Vuex
컨설팅 기능→Laavel
인증 기능의 일본어화→Auth
[초해설] 라벨 제작 상담으로!Gmail로 콜라보 할까요?
[Laavel] auth 일본어 하는 법!프로젝트의 메시지도 사용자 정의
◇ 필요한 기능

인증 기능

입력 값의 검증

이미지의 캐시 버스

migration과 결혼식

데이터베이스 CRUD

DB 스토리지 로깅을 위한 API 확보

컨설팅 기능

스마트폰으로 날짜를 NaN으로 변경하는 문제 해결

◇ 소감
Laavel 및 Vuejs로 앱을 만드는 것은 처음이라 고전하는 곳이 많고 공부하면서 만든 것이다.
하지만 덕분에 응용 프로그램을 만드는 절차, 구조, 필요한 기능 등에 대한 이해가 깊어졌다.
또 웹 앱을 제작할 때 주의해야 할 이미지의 캐시와 스마트폰 브라우저에 날짜를 표시하는 등 향후 제작할 때도 활용할 수 있는 요점도 살펴볼 수 있다.
[HTML] 이미지의 캐시 버스 변경 시 자동 업데이트!날짜만 기입하세요!
[JavaScript] 스마트폰에 날짜가 Nan인 이유와 해결 방법
Git에서 관리
버전 관리는 처음으로 Giit를 사용했습니다.기릿허브에 대한 업로드 방법과 공식 환경에 대한 다운로드, 무대 디자인과 브랜치 등 기릿 특유의 용어도 많이 기억할 수 있다.
[Giit] 설치 방법과 사용법!창고의 차이와 제작 방법!
Laavel 프로젝트를 GitHub로 push 하는 방법 및 고려 사항
테스트
로컬 환경에서 하나하나 오류가 발생했습니다.
공개한다
실제 공식 환경(ex서버)에서 지티허브에서 앱을 다운로드해 보려면 미세조정이 필요하지만 큰 버그나 오류가 없어도 공개할 수 있다.
실제로 공개된 곳은 여기다.

육아 지식 공유 사이트 - 미카타-
공개된 것은 좋은 것이지만 이번에 제작된 웹 애플리케이션은 사용자만 있는 것이다.하지만 손님을 만나는 방법에 대한 지식이 전혀 없는 것이 가장 어렵다고 생각합니다.
처음 하는 웹 응용 프로그램이기 때문에 문제, 오류, 주의해야 할 점이 있으면 모두 가능합니다. 저에게 알려주시면 기쁩니다!!
시청해 주셔서 감사합니다.